autocomplete-loading.module.pcss.css

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

/* Wrapper around the autocomplete element. */
.gin-autocomplete {
  position: relative;
  width: fit-content;
}

/* The "Loading" message gets positioned to the top right. */
.gin-autocomplete__message {
  position: absolute;
  max-width: 100%;
  margin-block-end: 0.15rem;
  color: var(--gin-color-primary);
  font-size: var(--font-size-xxs);
  font-weight: bold;
  line-height: calc(18rem / 16);
  inset-inline-end: 0;
  inset-block-end: 100%;

  .form-autocomplete.is-autocompleting + 
  }
}

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

  &:dir(rtl) {
    background-image: url(../../images/icons/868686/magnifier-rtl.svg);
    background-position: 0 50%;
  }
}

/* 
 dropdown */
.ui-autocomplete {
  color: var(--gin-color-text);
  border-radius: 0 0 var(--gin-border-m) var(--gin-border-m);
  background: var(--gin-bg-input);

  .ui-menu-item-wrapper.ui-state-active {
    color: var(--gin-color-primary-hover);
    background-color: var(--gin-bg-item-hover);

    @media (forced-colors: active) {
      outline: solid 2px transparent;
      outline-offset: -4px;
    }
  }

  .ui-menu-item a {
    color: var(--gin-color-text);

    &:hover {
      color: var(--gin-color-primary-hover);
      background-color: var(--gin-bg-item-hover);
    }
  }
}

@keyframes gin-throbber {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(360deg);
  }
}