autocomplete-loading.module.pcss.css

/**
 * @file
 * Visual styles for animated throbber.
 *
 * @see autocomplete.js
 */

/**
 * Since the autocomplete library is attached conditionally and not globally, we
 * can be 99% sure that the default icon will be used. With inline SVGs we can
 * prevent a HTTP request and repaint addressing the autocomplete input's
 * background — until are sure that it will be pushed by the server with HTTP/2.
 *
 * The active autocomplete state's background-image is inlined because non-used
 * CSS selectors are usually ignored; popular browsers don't download their
 * 'url' references.
 *
 * If these selectors become active, the browser needs some time for painting
 * previously ignored remote asset: it should get it from server, parse it and
 * repaint the background of autocomplete field. With the inlined background we
 * can prevent an additional timeout caused by a new request/response pair.
 * Besides this, the autocomplete event itself may easily finish before the
 * missing asset gets downloaded/parsed/painted, and the missing instant visual
 * feedback would be a usability/accessibility issue as well.
 */

.js {
  & .form-autocomplete {
    margin-inline-end: calc(var(--input-border-size) - 1.5 * var(--input-padding-horizontal));
    padding-inline-end: calc(var(--input-padding-horizontal) * 2.5 - var(--input-border-size));
    background-image: url(../../images/icons/868686/magnifier.svg);
    background-repeat: no-repeat;
    background-position: 100% 50%;

    &.is-autocompleting {
      background-image: url(../../images/icons/003ecc/spinner.svg);
      background-position: center right -10px;
    }
  }

  &[dir="rtl"] {
    & .form-autocomplete {
      background-image: url(../../images/icons/868686/magnifier-rtl.svg);
      background-position: 0 50%;

      &.is-autocompleting {
        background-image: url(../../images/icons/003ecc/spinner-rtl.svg);
        background-position: center left 10px;
      }
    }
  }
}

/**
 * Autocomplete wrapper for autocomplete message.
 */
.claro-autocomplete {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.claro-autocomplete__message {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 100%;
  max-width: 100%;
  margin-block-end: 0.15rem;
  color: var(--color-link);
  font-size: var(--font-size-xxs); /* ~11px */
  font-weight: bold;
  line-height: calc(18rem / 16); /* 18px */
}