.button {
    cursor: pointer;
    justify-content: center;
    padding-bottom: calc(0.5em - 1px);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: calc(0.5em - 1px);
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    margin-bottom: .5rem;
    background-color: $nord9;
    border-radius: 0.375rem;
    color: $button-font-color;
    @include transition() {}

    &:hover {
        background-color: darken($nord9, $hoverAmount);
    }

    &.is-danger {
        background-color: $danger-color;
        color: $button-alternate-color;

        &:hover {
            background-color: $danger-color-hl;
        }
    }

    &.is-primary {
        background-color: $primary-color;

        &:hover {
            background-color: $primary-color-hl;
        }
    }

    &.is-warning {
        background-color: $warning-color;

        &:hover {
            background-color: $warning-color-hl;
        }
    }

    &.is-success {
        background-color: $success-color;

        &:hover {
            background-color: $success-color-hl;
        }
    }

    &.is-link {
        background-color: transparent;
        border-color: $nord9;
        color: var(--button-link-text-color);

        &:hover {
            border-color: darken($nord9, $hoverAmount);
        }
    }
}