.toggle-buttons {
  display: flex;

  input {
    @include ilios-off-screen;
  }

  label {
    background-color: $white;
    color: $blue-munsell;
    border: 1px solid rgba($black, .2);
    display: inline-block;
    @include font-size('small');
    font-weight: 600;
    min-width: 3em;
    padding: .25em .5em;
    text-align: center;
    text-shadow: none;

    &:hover {
      cursor: pointer;
    }

    &:first-of-type {
      border-radius: 4px 0 0 4px;
    }

    &:last-of-type {
      border-radius: 0 4px 4px 0;
    }
  }

  input:checked + label {
    background-color: $blue-munsell;
    color: $white;
  }

}

.toggle-buttons {
  display: flex;

  input {
    @include ilios-off-screen;
  }

  label {
    background-color: $white;
    color: $teal-blue;
    border: 1px solid rgba($black, .2);
    display: inline-block;
    @include font-size('small');
    font-weight: 600;
    min-width: 3em;
    padding: .25em .5em;
    text-align: center;
    text-shadow: none;

    &:hover {
      cursor: pointer;
    }

    &:first-of-type {
      border-radius: 4px 0 0 4px;
    }

    &:last-of-type {
      border-radius: 0 4px 4px 0;
    }
  }

  input:checked + label {
    background-color: $teal-blue;
    color: $white;
  }

}

Make toggle buttons teal blue
Make toggle buttons teal blue

To meet a11y contrast requirements.
