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

.a-select {
  --select-border: var(--select-border-default);
  --select-border-width: var(--select-border-width-default);

  position: relative;
  border: var(--select-border-width) solid var(--select-border);

  &:has(select[disabled]) {
    border: var(--select-border-width-default) solid
      var(--select-border-default);
  }

  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: var(--white);
    border-radius: 0;
    color: var(--black);

    &:hover,
    &.hover {
      outline: 2px solid var(--select-border-hover-default);
      outline-offset: 0;
      cursor: pointer;
    }

    &:active,
    &:focus,
    &.focus {
      box-shadow: 0 0 0 2px var(--select-border-focus-default);
      outline: 1px dotted var(--select-border-focus-default);

      // 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] {
    background-color: var(--select-bg-disabled-default);
    cursor: not-allowed;

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

  select[disabled],
  select[disabled] option,
  select[disabled] option:disabled,
  select option:disabled {
    color: var(--select-text-disabled-default);
  }

  &::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 var(--select-border-default);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--select-icon-bg-default);

    background-image: $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 {
    background-image: $cfpb-background-icon-svg-down-gray;
  }

  &--error {
    --select-border: var(--select-border-error);
    --select-border-width: var(--select-border-width-error);
  }
}