@use "./config";
@use "./mixins";
@use "../../TextInput/styles/mixins" as textMixins;
@use "../../TextInput/styles/config" as textConfig;
@use "../../styles/config" as commonConfig;
@use "../../../../styles/tokens/base";
@use "../../../../styles/tools/generate";
@use "../../../../styles/tools/convert";

@layer components {
  .autocomplete {
    font-size: base.$font-size;

    &__hint,
    &__input,
    &__option {
      font-size: inherit;
      line-height: inherit;
    }

    &__wrapper {
      @include mixins.wrapper();

      &:has(.autocomplete__menu--visible) {
        z-index: 2;
      }

      &--search-icon,
      &--search-icon-with-placeholder {
        isolation: isolate;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: convert.to-rem(10px);
          width: convert.to-rem(20px);
          height: convert.to-rem(20px);
          transform: translateY(-50%);
          background-color: var(--color-icon-brand);
          mask-image: textConfig.$mask-image-search-icon;
          mask-position: center;
          mask-repeat: no-repeat;
          mask-size: contain;
          pointer-events: none;
          z-index: 3;
        }

        &:has(.autocomplete__input:not(:placeholder-shown))::before {
          background-color: var(--color-icon-default);
        }

        &:has(.autocomplete__input:disabled)::before {
          background-color: var(--color-icon-disabled);
        }

        &:has(.autocomplete__input.is-invalid)::before,
        &:has(.autocomplete__input[aria-invalid="true"])::before {
          background-color: var(--color-icon-negative);
        }

        .autocomplete__input {
          background-image: none !important;
          padding-left: convert.to-rem(40px);
          position: relative;
          z-index: 1;
        }

        .autocomplete__hint {
          padding-left: convert.to-rem(40px);
        }
      }

      &--search-icon-with-placeholder {
        .autocomplete__input {
          padding-right: convert.to-rem(44px);
        }

        .autocomplete__hint {
          padding-right: convert.to-rem(44px);
        }
      }
    }

    &__clear {
      position: absolute;
      top: 50%;
      right: 0;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: convert.to-rem(44px);
      height: convert.to-rem(36px);
      padding: 0;
      background: transparent;
      border: 0;
      transform: translateY(-50%);
      cursor: pointer;

      &::before {
        content: "";
        width: convert.to-rem(24px);
        height: convert.to-rem(24px);
        background-color: var(--color-icon-default);
        mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 20L10 12L18 4L20 6L14 12L20 18L18 20Z" fill="%23000"/><path d="M6 4L14 12L6 20L4 18L10 12L4 6L6 4Z" fill="%23000"/></svg>');
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
      }

      &:focus-visible {
        outline: 2px solid var(--color-border-contrast);
        outline-offset: -2px;
      }

      &[hidden] {
        display: none;
      }
    }

    &__input {
      @include textMixins.base();
      @include textMixins.states();

      width: 100%;
      @each $size, $values in config.$sizes {
        &#{generate.variant-name($size)} {
          @include textMixins.size($size);
        }
      }

      &--focused {
        @include generate.css-map(commonConfig.$focus);

        box-shadow: none;
      }
    }

    &__hint {
      @include mixins.hint;
    }

    &__menu {
      @include mixins.menu;

      &--visible {
        @include mixins.menu-visible;
      }

      &--hidden {
        @include mixins.menu-hidden;
      }
    }

    &__option {
      @include mixins.option;

      &--focused,
      &.active,
      &:active,
      &:focus,
      &:hover {
        @include mixins.active-option;
      }
    }
  }
}