.b-button {
    border-radius: 4px;
    padding: 10px 20px;
    font-size: $base-fontsize;
    text-decoration: none;

    &.is-primary {
        color: $white;
        background-color: $medium-gray;

        &:hover,
        .keyboard-focus &:focus {
            background-color: $primary-color;
        }

        &:active {
            background-color: $medium-gray;
        }
    }

    &.is-secondary {
        border: solid 1px $medium-gray;
        color: $dark-gray;
        background-color: $white;

        &:hover,
        .keyboard-focus &:focus {
            border-color: $primary-color;
            color: $primary-color;
        }

        &:active {
            border-color: $medium-gray;
            color: $dark-gray;
        }
    }

    &:disabled,
    &.is-disabled {
        opacity: .5;
        pointer-events: none;
    }
}