#{$all-buttons} {
    appearance: none;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    display: inline-block;
    font-family: $base-font-family;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    font-weight: 600;
    line-height: 1;
    padding: $small-spacing $base-spacing;
    text-decoration: none;
    transition: background-color border-color $base-duration $base-timing;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    outline: none;
    min-width: 80px;

    border: 1px solid var(--action-color);
    background-color: var(--action-color);
    color: var(--text-contrast-action-color);

    &.btn-error,
    &.btn-silent {
        border-color: var(--base-border-color);
        background-color: transparent;
        color: var(--text-color);
    }

    &:hover {
        border-color: var(--action-background-color-focus);
        background-color: var(--action-background-color-focus);
        &.btn-error {
            border-color: var(--error-background-color-focus);
            background-color: var(--error-background-color-focus-tr);
        }
        &.btn-silent {
            border-color: var(--action-background-color-focus);
            background-color: var(--action-background-color-focus-tr);
        }
    }

    &:active {
        border-color: var(--action-background-color-active);
        background-color: var(--action-background-color-active);
        &.btn-error {
            border-color: var(--error-background-color-active);
            background-color: var(--error-background-color-active-tr);
        }
        &.btn-silent {
            border-color: var(--action-background-color-active);
            background-color: var(--action-background-color-active-tr);
        }
    }

    &:disabled {
        cursor: default;
        opacity: 0.5;
        &:hover {
            border-color: var(--action-color);
            background-color: var(--action-color);
            &.btn-error {
                border-color: var(--error-color);
                background-color: transparent;
            }
            &.btn-silent {
                border-color: var(--action-color);
                background-color: transparent;
            }
        }
    }
}

@mixin icon-btn($error: false) {
    @include area-selectable(bottom);
    padding: 0.7em 0.6em 0;
    height: 1.6em;
    > i {
        display: block;
    }
    @if $error {
        &:hover {
            border-color: var(--error-color);
        }
    }
}