@use 'Foundation/scss/input-chains' as chains;

@mixin border-radius($radius) {
  border-radius: $radius;

  &:-webkit-autofill {
    border-radius: $radius;
  }
}

.search {
  &#{&}--expandable {
    display: inline-block;
  }

  &#{&}--expandable#{&}--expand-direction-left {
    margin-left: auto;
  }

  &#{&}--expandable#{&}--expand-direction-left &__content {
    margin-left: auto;
  }

  &#{&}--expandable &__content {
    transition: width 0.3s;
  }

  &#{&}--expandable [data-input-parent] > div:nth-of-type(1) input {
    transition: opacity 0.3s;
  }

  &#{&}--collapsed &__content {
    cursor: pointer;
  }

  &#{&}--collapsed [data-input-parent] > div:nth-of-type(1) {
    border-color: transparent;
  }

  &#{&}--collapsed [data-input-parent] > div:nth-of-type(1) input {
    opacity: 0;
    min-width: 0 !important;
    pointer-events: none;
  }

  &#{&}--size-large#{&}--collapsed &__content {
    width: #{chains.$input-size-large};
  }

  &#{&}--size-medium#{&}--collapsed &__content {
    width: #{chains.$input-size-medium};
  }

  &#{&}--size-small#{&}--collapsed &__content {
    width: #{chains.$input-size-small};
  }

  // Override left padding for expandable state to ensure icon is centered across all themes
  &#{&}--expandable#{&}--size-small .input__wrapper {
    padding-left: var(--wds-search-expandable-padding-small, 6px);
  }

  &#{&}--expandable#{&}--size-medium .input__wrapper {
    padding-left: var(--wds-search-expandable-padding-medium, var(--wds-space-100, 6px));
  }

  &#{&}--expandable#{&}--size-large .input__wrapper {
    padding-left: var(--wds-search-expandable-padding-large, var(--wds-space-150, 9px));
  }

  &:not(&--collapsed) {
    display: block !important;
    flex: 1;
  }

  @layer wds.composition {
    &#{&}--size-tiny#{&}--border-round .input {
      @include border-radius(var(--wds-search-border-radius-tiny, var(--wds-border-radius-full, 13px)));
    }

    &#{&}--size-small#{&}--border-round .input {
      @include border-radius(var(--wds-search-border-radius-small, var(--wds-border-radius-full, 15px)));
    }

    &#{&}--size-medium#{&}--border-round .input {
      @include border-radius(var(--wds-search-border-radius-medium, var(--wds-border-radius-full, 18px)));
    }

    &#{&}--size-large#{&}--border-round .input {
      @include border-radius(var(--wds-search-border-radius-large, var(--wds-border-radius-full, 21px)));
    }
  }
}