@use 'sass:map';
@use '@beeline/design-tokens/scss/tokens/themes/dark';
@use '@beeline/design-tokens/scss/tokens/themes/light';

.select {
  select {
    border: 1px solid transparent;

    &:focus,
    &:active {
      border: 1px solid map.get(light.$theme, 'color-border-focus');
      background-color: map.get(light.$theme, 'color-background-base');
      box-shadow: none;
    }
  }

  &:not(.is-multiple):not(.is-loading)::after {
    content: none;
  }

  &:focus,
  &.is-focused,
  &:active,
  &.is-active {
    select {
      border: 1px solid map.get(light.$theme, 'color-border-focus');
      background-color: map.get(light.$theme, 'color-background-base');
      box-shadow: none;
    }

    .dark-theme & {
      select {
        border: 1px solid map.get(dark.$theme, 'color-border-focus');
        background-color: map.get(dark.$theme, 'color-background-base');
        box-shadow: none;
      }
    }
  }

  .dark-theme & {
    color: map.get(dark.$theme, 'color-text-active');

    & select {
      color: map.get(dark.$theme, 'color-text-active');
      background-color: map.get(dark.$theme, 'color-control-background');
    }
  }
}