@use 'sass:map';
@use '../../sprite';
@use '../../base/token';
@use '../../abstract';

:root {
  --select-height-xs: 32px;
  --select-height-sm: 36px;
  --select-height-md: 40px;
  --select-height-lg: 44px;
}

$select-size: (
  'xs': (
    font: abstract.rem(token.$font-size-1),
    height: var(--select-height-xs),
    border-radius: 6px,
  ),
  'sm': (
    font: abstract.rem(token.$font-size-1),
    height: var(--select-height-sm),
    border-radius: 8px,
  ),
  'md': (
    font: abstract.rem(token.$font-size-2),
    height: var(--select-height-md),
    border-radius: 8px,
  ),
  'lg': (
    font: abstract.rem(token.$font-size-2),
    height: var(--select-height-lg),
    border-radius: 8px,
  ),
);

.cds-select {
  $this: &;
  &__content {
    @include abstract.relative;

    display: flex;
    align-items: center;
    padding-inline-start: 14px;
    isolation: isolate;
    border: 1px solid var(--gray-200);
    background-color: var(--base-white);
    overflow: hidden;

    &::after {
      @include abstract.absolute($top: 50%, $right: 12px);
      @include abstract.bg2x-sprite();
      @include abstract.sprite2x(sprite.$chevron-down);
      content: '';
      z-index: -1;
      transform: translateY(-50%);
    }
  }

  &__select {
    @include abstract.debug;
    @include abstract.relative;
  }

  &__icon {
    margin-right: 8px;
    svg {
      display: block;
    }
  }

  select {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    height: 100%;
    flex: 1;
    padding-right: 42px;
    background-color: transparent;
    outline: none;
    color: var(--gray-700);
  }

  &__content:focus-within {
    border-color: var(--gray-400);
    box-shadow: var(--shadow-xs-focused-4px-primary-gray-100);
  }

  &.destructive #{$this}__content {
    border-color: var(--primary-red-600);

    &:focus-within {
      box-shadow: var(--shadow-xs-focused-4px-error-100);
    }
  }

  & > *:last-child {
    margin-bottom: 0;
  }

  @each $size, $info in $select-size {
    &--#{$size} {
      @if ($size == 'md') {
        min-width: 132px;
      }
      & > .cds-select__tag {
        font-size: map.get($info, 'font');
      }

      height: map.get($info, 'height');
      border-radius: map.get($info, 'border-radius');
    }
  }
}