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

$b: '.search';

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

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

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

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

#{$b}#{$b}--expandable#{$b}--size-large .input__wrapper {
  padding-left: var(--wds-search-expandable-padding-large, 5px);
}

@layer wds.composition {
  #{$b}#{$b}--size-tiny#{$b}--border-round .input {
    border-radius: var(--wds-search-border-radius-tiny, var(--wds-border-radius-200, 13px));

    &:-webkit-autofill {
      border-radius: var(--wds-search-border-radius-tiny, var(--wds-border-radius-200, 13px));
    }
  }

  #{$b}#{$b}--size-small#{$b}--border-round .input {
    border-radius: var(--wds-search-border-radius-small, var(--wds-border-radius-200, 15px));

    &:-webkit-autofill {
      border-radius: var(--wds-search-border-radius-small, var(--wds-border-radius-200, 15px));
    }
  }

  #{$b}#{$b}--size-medium#{$b}--border-round .input {
    border-radius: var(--wds-search-border-radius-medium, var(--wds-border-radius-200, 18px));

    &:-webkit-autofill {
      border-radius: var(--wds-search-border-radius-medium, var(--wds-border-radius-200, 18px));
    }
  }

  #{$b}#{$b}--size-large#{$b}--border-round .input {
    border-radius: var(--wds-search-border-radius-large, var(--wds-border-radius-200, 21px));

    &:-webkit-autofill {
      border-radius: var(--wds-search-border-radius-large, var(--wds-border-radius-200, 21px));
    }
  }
}