@use "00-base/configure" as *;

.ma__select-box {
  display: inline-block;
  position: relative;

  &__label {
    display: block;
    font-size: $fonts-medium;
  }

  &--optional &__label {

    &:after {
      content: "(optional)";
      font-size: .8em;
      margin-left: .25em;
    }
  }

  &__field {
    display: block;
    font-size: 0;
    position: relative;
  }

  &__select {
    -webkit-appearance: menulist-button;
    font-size: $fonts-small;
    height: 100%;
    opacity: 0;
    position: absolute;
      top: 0;
      left: 0;
    width: 100%;
    z-index: 2;
  }

  &__link {
    border: 2px solid;
    font-size: $fonts-small;
    line-height: 36px;
    min-height: 40px;
    overflow: hidden;
    padding-left: 18px;
    padding-right: 58px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__icon {

    @include ma-chevron;
    border-left: 2px solid;
    height: 100%;
    padding-right: 3px;
    position: absolute;
      top: 0;
      right: 0;
    text-align: center;
    width: 40px;

    &:after {
      margin: 0;
      transform: translateY(-2px) rotate(45deg);
    }
  }

  &__select:focus + &__link {
    outline-width: 2px;
    outline-style: solid;

    /* WebKit gets its native focus styles.
     */

    @media (-webkit-min-device-pixel-ratio:0) {
      outline-style: auto;
    }
  }
}

//theme

.ma__select-box {

  &__label {
    font-weight: $fonts-normal;
  }

  &__select {
    color: $c-font-base;
    font-weight: $fonts-lighter;
  }

  &__link {
    background-color: $c-white;
    border-color: $c-bd-input;

    .ma__form--light & {
      background-color: rgba($c-white,.1);
      border-color: rgba($c-bd-input,.5);
    }
  }

  &__select.has-error ~ &__link {
    border-color: $c-bd-error;
  }

  &__icon {
    border-color: $c-bd-input;

    .ma__form--light & {
      border-color: rgba($c-bd-input,.5);
    }
  }

  &__select.has-error ~ &__link &__icon {
    border-color: $c-bd-error;
  }

  &__select:focus + &__link {
    border-color: Highlight;

    /* WebKit gets its native focus styles.
     */

    @media (-webkit-min-device-pixel-ratio:0) {
      outline-color: -webkit-focus-ring-color;
    }
  }
}