@import '../settings/variables';

.c-option-button {
  @include createText($font-maersk-text, $font-size-caption, $font-weight-normal, 1.5em);

  height: 2.4rem;
  color: $color-secondary-dark;
  background-color: $color-background-alternative;
  padding: 0 1rem;
  vertical-align: middle;
  border: 2px solid $color-background-alternative;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: $color-button-hover;
    border: 2px solid $color-button-hover;
  }

  &--active {
    color: $color-background;
    background-color: $color-primary;
    border: 2px solid $color-primary;

    &:hover {
      background-color: $color-button-active-hover;
      border: 2px solid $color-button-active-hover;
    }
  }

  &--outlined {
    color: $color-primary;
    background-color: $color-background;
    border: 2px solid $color-primary;

    &:hover {
      background-color: $color-secondary-button-hover;
      border: 2px solid $color-primary;
    }
  }
}