/* ============================== *
 * ## Address Search Component ##
 * ============================== */

.address-search-component {
   --duration: 1.2s; /* total cycle time */
}

.address-search-component .section,
.address-search-component .section .content,
.address-search-component .section .header {
   float: left;
   position: relative;
   width: 100%;
}

.address-search-component .section .header {
   cursor: default;
   font-size: 16px;
   font-weight: bold;
   line-height: 16px;
}

.address-search-component .ui-input.role-postcode-input .input-container {
   width: 200px;
}

/* ============ *
 * ## Output ##
 * ============ */

.address-search-component .role-search-result-label,
.address-search-component .role-address-search-output {
   font-size: 14px;
}

.address-search-component .role-address-search-output.eligible {
   color: var(--primary);
   font-weight: bold;
}

/* =============== *
 * ## Searching ##
 * =============== */

.address-search-component .role-search-result-searching {
   align-items: center;
   color: var(--primary);
   display: inline-flex;
   font-weight: bold;
}

.address-search-component .role-search-result-searching .dots {
   display: inline-flex;
   margin-left: 0.4ch;
}

.address-search-component .role-search-result-searching .dots span {
   opacity: 0;
   margin-left: 0.2ch;
   font-weight: 600;
   animation: fadeColor var(--duration) infinite ease-in-out;
}

  /* Stagger the dots */
.address-search-component .role-search-result-searching .dots span:nth-child(1) { animation-delay: 0s; }
.address-search-component .role-search-result-searching .dots span:nth-child(2) { animation-delay: calc(var(--duration) * 0.25); }
.address-search-component .role-search-result-searching .dots span:nth-child(3) { animation-delay: calc(var(--duration) * 0.50); }

/* Fade + color cycle */
@keyframes fadeColor {
   0%   { opacity: .25;   color: var(--primary); }
   25%  { opacity: 1;   color: var(--primary); }
   50%  { opacity: 1;   color: var(--primary); }
   75%  { opacity: 1;   color: var(--primary); }
   100% { opacity: .25;   color: var(--primary); }
}

/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
   .address-search-component .role-search-result-searching .dots span {
      animation: none;
      opacity: 1;
      color: currentColor;
   }
}