.locale-chooser {
  position: relative;
  text-align: right;
  button {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: $white;
    font-weight: normal;
    width: 4rem;

    @include for-laptop-and-up {
      width: 10rem;
    }
  }

  .menu {
    border: 1px solid darken($base-background-color, 3);
    box-shadow: 0 2px 2px transparentize($black, .8);
    display: flex;
    flex-direction: column;
    z-index: 100;

    button {
      border: 0;
      background-color: $white;
      color: $black;
      outline: none;
      padding: .5rem 1rem;
      width: 10rem;

      &[aria-checked='true'] {
        background-color: lighten($ilios-green, 25);
      }
      &:hover,
      &:focus {
        background-color: darken($base-background-color, 3);
        &[aria-checked='true'] {
          background-color: lighten($ilios-green, 15);
        }
      }
    }
  }

  .toggle {
    &::after {
      content: '\25BE';
    }
    span {
      display: none;

      @include for-laptop-and-up {
        display: inline;
      }
    }
    &:hover,
    &[aria-expanded='true'] {
      background-color: $white;
      color: $ilios-orange;
    }
  }
}

.locale-chooser {
  position: relative;
  text-align: right;
  button {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: $white;
    font-weight: normal;
    width: 4rem;

    @include for-laptop-and-up {
      width: 10rem;
    }
  }

  .menu {
    border: 1px solid darken($base-background-color, 3);
    box-shadow: 0 2px 2px transparentize($black, .8);
    display: flex;
    flex-direction: column;
    z-index: 100;

    button {
      border: 0;
      background-color: $white;
      color: $black;
      outline: none;
      padding: .5rem 1rem;
      width: 10rem;

      &[aria-checked='true'] {
        background-color: lighten($ilios-green, 25);
      }
      &:hover,
      &:focus {
        background-color: darken($base-background-color, 3);
        &[aria-checked='true'] {
          background-color: lighten($ilios-green, 15);
        }
      }
    }
  }

  .toggle {
    &::after {
      content: '\25BE';
    }
    span {
      display: none;

      @include for-laptop-and-up {
        display: inline;
      }
    }
    &:hover,
    &[aria-expanded='true'] {
      background-color: $white;
      color: $text-grey;
    }
  }
}

Use a higher contrast color when the choose is expanded
Use a higher contrast color when the choose is expanded

In order to meet accessiblity guidlines for color contrast we need something much darker than our orange against the white background of the dropdown when it is open or hovered over.
