/**
 * @file
 * Visual styles for autocomplete input field.
 */

@import "../base/variables.pcss.css";

:root {
  --autocomplete-search-icon-url: url("../../images/magnifying-glass.svg");
  --autocomplete-throbber-icon-url: url("../../images/throbber.svg");
  --autocomplete-throbber-IE-icon-url: url("../../images/throbber.gif");
  --autocomplete-throbber-IE-size: 1.125rem 1.125rem; /* 18 18 */
  --autocomplete-icon-right-offset: var(--sp1);
  --autocomplete-icon-top-offset: calc(var(--sp1) - var(--form-element-border-size-base));
}

html.js .form-autocomplete {
  padding-inline-end: var(--sp3);
  background:
    var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
    linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);

  &:hover {
    background:
      var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
      linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
      linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
  }

  &:focus {
    background:
      var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
      linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
      linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
  }

  &.ui-autocomplete-loading {
    background:
      var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
      linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);

    &:hover {
      background:
        var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
        linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
        linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
    }

    &:focus {
      background:
        var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
        linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
        linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
    }
  }
}

html.js[dir="rtl"] .form-autocomplete {
  background:
    var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
    linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);

  &:hover {
    background:
      var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
      linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
      linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
  }

  &:focus {
    background:
      var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
      linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
      linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
  }

  &.ui-autocomplete-loading {
    background:
      var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
      linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);

    &:hover {
      background:
        var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
        linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
        linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
    }

    &:focus {
      background:
        var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
        linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
        linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
    }
  }
}

/* IE11 does not animate inline SVG. */
/* rtl:begin:ignore */
/* stylelint-disable-next-line selector-type-no-unknown */
_:-ms-fullscreen,
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading {
  background:
    var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
    linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
}

/* stylelint-disable-next-line selector-type-no-unknown */
_:-ms-fullscreen,
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:hover {
  background:
    var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
    linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
    linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
}

/* stylelint-disable-next-line selector-type-no-unknown */
_:-ms-fullscreen,
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:focus {
  background:
    var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
    linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
    linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
}

/* stylelint-disable-next-line selector-type-no-unknown */
_:-ms-fullscreen,
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading {
  background:
    var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
    linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
}

/* stylelint-disable-next-line selector-type-no-unknown */
_:-ms-fullscreen,
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:hover {
  background:
    var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
    linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
    linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
}

/* stylelint-disable-next-line selector-type-no-unknown */
_:-ms-fullscreen,
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:focus {
  background:
    var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
    linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
    linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
}
/* rtl:end:ignore */