.switch {
  @include breakpoint(medium up) {
    text-align: left;
  }

  &.custom-switch-alignment {
    @include breakpoint(large up) {
      text-align: right;
    }
  }

  .switch-option {
    background-color: transparent;
    border: 2px solid $light-mint;
    border-radius: 2px;
    z-index: 5;
    color: $mint;
    margin: 0;
    width: (102.864em / $global-size);
    height: (57.152em / $global-size);

    &.active {
      background: $mint;
      color: $white;
    }
  }
}

.small-only-text-center {
  text-align: center;
  @include breakpoint(medium up) {
    text-align: left;
  }
}

.underline-hover {
  color: $mint;
  &:hover {
    color: $mint;
    text-decoration: underline;
  }
}