@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/abstracts' as *;

.a-select {
  position: relative;
  border: 1px solid $select-border;

  select {
    width: 100%;
    line-height: $base-line-height;
    padding: math.div(7px, $base-font-size-px) + em
      math.div(6px, $base-font-size-px) + em math.div(6px, $base-font-size-px) +
      em;
    border: 0;
    appearance: none;
    background-color: $input-bg;
    border-radius: 0;
    color: $text;

    &:hover,
    &.hover {
      outline: 2px solid $input-border-hover;
      outline-offset: 0;
    }

    &:active,
    &:focus,
    &.focus {
      box-shadow: 0 0 0 2px $input-border-focused;
      outline: 1px dotted $input-border-focused;

      // The outline-offset property is not supported everywhere (e.g. IE)
      // but it adds a nice touch in browsers where it is.
      outline-offset: 3px;
    }
  }

  select[disabled] {
    color: $select-text-disabled;
    background-color: $input-bg-disabled;
    cursor: not-allowed;

    &:hover,
    &.hover,
    &:focus,
    &.focus {
      outline: none;
    }
  }

  select[disabled] option,
  select[disabled] option:disabled,
  select option:disabled {
    color: $select-text-disabled;
  }

  &::after {
    // Arrow box width must be odd size to properly center the bg image
    width: math.div($select-height, $base-font-size-px) + em;
    box-sizing: border-box;
    border-left: 1px solid $select-border;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: $select-icon-bg;

    --cfpb-background-icon-svg: 'down';

    background-size: auto $cf-icon-height;
    background-repeat: no-repeat;
    background-position: center center;
    content: '';
    pointer-events: none;
  }

  // Correctly lighten the down arrow when a-select--disabled is present.
  // Unfortunately, we can't target this to apply when only
  // the select[disabled] is present and need the additional class.
  &--disabled::after {
    --cfpb-background-icon-svg: 'down rgb(90,93,97)';
  }
}