// Import external dependencies
@import (reference) '@cfpb/cfpb-icons/src/cfpb-icons.less';

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

  select {
    width: 100%;
    line-height: @base-line-height;
    padding: unit(7px / @base-font-size-px, em)
      unit(6px / @base-font-size-px, em) unit(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: unit(@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;
    .u-svg-inline-bg( '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 {
    .u-svg-inline-bg( 'down', true );
  }
}