@mixin link-button {
    text-decoration: none;
    text-align: center;
    line-height: 100%;
    text-transform: capitalize;
    padding: 10px 25px;
    display: inline-block;
    font-weight: 400;
    font-family: inherit;
    border-radius: $BORDER_RADIUS;

    &:active, &:hover {
        text-decoration: none;
    }
}

button {
    @include link-button;
    cursor: pointer;
    font-size: $FONT_SIZE_N;
    border: 0;
    background: $positiveColor;
    color: $contentInverseColor;

    &:visited {
        color: $contentInverseColor;
    }
    &:active, &:hover {
        background-color: $darkPositiveColor;
    }
    &.button-secondary {
        background: $fillColor;
        color: $contentColor;

        &:active, &:hover, &:visited {
            background-color: $borderColor;
        }
    }
}

.button {
    cursor: pointer;
    margin-bottom: 0.5em;

    span {
        @include link-button;
        overflow: visible;
        border: 0;
        color: $contentInverseColor;
        background: $positiveColor;

        &:hover {
            background-color: $darkPositiveColor;
        }
        &:visited {
            color: $contentInverseColor;
        }
    }
}

.button-secondary {
    cursor: pointer;
    margin-bottom: 0.5em;

    span {
        @include link-button;
        overflow: visible;
        border: 0;
        color: $contentColor;
        background: $fillColor;

        &:hover {
            text-decoration: none;
            background: $borderColor;
        }
    }
}

.button-disabled {
    cursor: pointer;
    margin-bottom: 0.5em;

    span {
        @include link-button;
        overflow: visible;
        white-space: nowrap;
        border: 0;
        color: $borderColor;
        background: $fillColor;
        cursor: default;

        &:active, &:hover {
            color: $borderColor;
            background: $fillColor;
        }
    }
}