@use "../../../../styles/tools/generate";
@use "./config";
@use "./mixins";

@layer components {
  .text-input__wrapper {
    position: relative;

    &--search-icon,
    &--search-icon-with-placeholder {
      display: inline-block;

      &:has(> .text-input--3ch) {
        @include mixins.width(3ch);
      }

      &:has(> .text-input--8ch) {
        @include mixins.width(8ch);
      }

      &:has(> .text-input--12ch) {
        @include mixins.width(12ch);
      }

      &:has(> .text-input--fullwidth) {
        @include mixins.width(fullwidth);
      }

      &:has(
        > .text-input:not(.text-input--3ch):not(.text-input--8ch):not(
            .text-input--12ch
          ):not(.text-input--fullwidth)
      ) {
        @include mixins.width(default);
      }

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0.625rem;
        width: 1.25rem;
        height: 1.25rem;
        transform: translateY(-50%);
        background-color: var(--color-icon-brand);
        mask-image: config.$mask-image-search-icon;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        pointer-events: none;
        z-index: 1;
      }

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

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

      &:has(> .text-input.is-invalid)::before {
        background-color: var(--color-icon-negative);
      }

      > .text-input {
        background-image: none !important;
        padding-left: 2.5rem;
      }
    }
  }

  .text-input {
    @include mixins.base();
    @include mixins.states();

    @each $size, $values in config.$sizes {
      &#{generate.variant-name($size)} {
        @include mixins.size($size);
      }
    }

    @each $width, $value in config.$widths {
      &#{generate.variant-name($width)} {
        @include mixins.width($width);
      }
    }
  }

  .input--search-icon {
    @include mixins.search-icon();
  }

  .input--search-icon-with-placeholder {
    @include mixins.search-icon-with-placeholder();
  }
}