/**
 * @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(--admin-color-primary);
  font-size: var(--admin-font-size-2xs);
  font-weight: bold;
  line-height: calc(18rem / 16);
  inset-inline-end: 0;
  inset-block-end: 100%;

  .form-autocomplete.is-autocompleting + & {
    display: block;

    /* The spinner. */
    &::after {
      position: absolute;
      display: block;
      width: 14px;
      height: 14px;
      content: "";
      animation: gin-throbber 1s linear infinite;
      text-align: end;
      border: 2px solid var(--admin-color-bg-input);
      border-block-start: 2px solid var(--admin-color-primary);
      border-radius: 50%;
      inset-block-start: 35px;
      inset-inline-end: 12px;
    }
  }
}

/* The actual <input type="text"> 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%;
  }
}

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

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

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

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

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

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

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