@import '../settings/variables';

.o-button {
  &__primary {
    font-family: $font-maersk-text;
    font-size: $font-size-caption;
    font-weight: $font-weight-normal;
    line-height: 1;

    transition: background-color 0.2s ease-in-out;
    padding: 0.9285em 1.2857em;
    border: 0.125rem solid $color-primary;
    cursor: pointer;
    border-radius: 0.25rem;
    color: $color-primary;

    &:hover {
      background-color: rgba(87, 185, 218, 0.08);
    }

    &:focus {
      outline: 0.125rem solid #b5e0f4;
    }

    &:active {
      background-color: rgba(97, 200, 235, 0.15);
    }
  }
}