#{$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;
            }
        }
    }
}

.btn ~ .btn,
button ~ button {
    margin-left: $small-spacing;
}

@mixin icon-btn($error: false) {
    @include area-selectable();
    padding: $medium-padding;
    text-align: center;
    border-radius: var(--block-border-radius);
    transition: color $base-duration $base-timing;
    > i {
        vertical-align: middle;
    }
    @if $error {
        color: var(--muted-color);
        &:hover {
            color: var(--error-color);
        }
    }
}

@mixin bg-btn() {
    user-select: none;
    cursor: pointer;
    -webkit-app-region: no-drag;
    padding: $medium-padding;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--block-border-radius);
    background-color: var(--intermediate-background-color);
    transition: color $base-duration $base-timing;
    > i {
        margin-right: 0.4em;
        line-height: inherit;
        vertical-align: bottom;
    }
    &:hover {
        background-color: var(--intermediate-background-color);
        color: var(--medium-color);
        transform: background-color $base-duration $base-timing;
    }
    &:active {
        background-color: var(--intermediate-pressed-background-color);
        color: var(--text-color);
    }
}

@mixin bg-btn-active() {
    color: var(--selected-item-text-color);
    background-color: var(--selected-item-color);
}
