@mixin button {
    --btn-background: var(--primary);
    --btn-highlight: var(--primary-hover);

    padding: 12px 24px;

    background-color: var(--btn-background);
    border: 2px solid var(--btn-background);
    border-radius: 8px;
    font-weight: 400;

    display: inline-block;

    color: var(--text);

    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
        background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

    text-decoration: none;

    &:hover:not(&:disabled),
    &:focus:not(&:disabled),
    &:active:not(&:disabled) {
        background-color: var(--btn-highlight);
        border-color: var(--btn-highlight);
        color: var(--text);

        text-decoration: none;
    }

    &:focus:not(&:disabled),
    &:active:not(&:disabled) {
        outline: none;
    }

    &:disabled {
        opacity: 0.6;
        color: var(--text);
        cursor: not-allowed;
    }
}

@mixin small() {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 8px 20px;
}

@mixin red() {
    --btn-highlight: var(--red);
}

@mixin green() {
    --btn-highlight: var(--green);
}

button,
.button,
[role='button'] {
    @include button;

    &.secondary {
        background-color: unset;
    }

    &.small {
        @include small;
    }

    &.red {
        @include red;
    }

    &.green {
        @include green;
    }
}