/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @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: 0.875rem;
      height: 0.875rem;
      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: 2.1875rem;
      inset-inline-end: 0.75rem;
    }
  }
}

/* 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: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: 100% 50%;

  &:dir(rtl) {
    background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");
    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);
  }
}