// Buttons
// ----------------------------------------------------------------------------

.btn {
    // needed because $btn-box-shadow doesn't work
    box-shadow: 0 0 0 1px rgba(43, 45, 80, .1), 0 2px 5px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .07), 0 1px 2px 0 rgba(0, 0, 0, .08);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn:not(:disabled):not(.disabled):not(.btn-link):hover,
.btn:not(:disabled):not(.disabled):not(.btn-link):active,
.btn:not(:disabled):not(.disabled):not(.btn-link):focus,
.btn:not(:disabled):not(.disabled):not(.btn-link):active:focus {
    // needed because $btn-focus-box-shadow and $btn-active-box-shadow are ignored for .btn-primary, .btn-info, etc.
    box-shadow: 0 0 0 1px rgba(43, 45, 80, .1), 0 2px 5px 0 rgba(43, 45, 80, .1), 0 3px 9px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .08), 0 1px 2px 0 rgba(0, 0, 0, .08);
}

.btn-primary, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active:focus {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
}

.btn-secondary, .btn-secondary[disabled], .btn-secondary.disabled {
    background-color: var(--white);
    color: var(--color-text);
}
.btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):focus, .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled):active:focus {
    background-color: var(--white);
    color: var(--color-text-dark);
}

.btn.btn-info, .btn-info, .btn-info:hover, .btn-info:not(:disabled):not(.disabled):focus, .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active:focus {
    background-color: var(--color-info);
    color: var(--white);
}

.btn.btn-success, .btn-success, .btn-success:hover, .btn-success:not(:disabled):not(.disabled):focus, .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active:focus {
    background-color: var(--color-success);
    color: var(--white);
}

.btn.btn-danger, .btn-danger, .btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):focus, .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled):active:focus {
    background-color: var(--color-danger);
    color: var(--white);
}

.btn.btn-warning, .btn-warning, .btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):focus, .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled):active:focus {
    background-color: var(--color-warning);
    color: var(--white);
}

.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link:active:focus {
    box-shadow: none; // needed to make the button link look like a regular link
}

.btn.disabled, .btn:disabled,
.btn.disabled:hover, .btn:disabled:hover,
.btn.disabled:focus, .btn:disabled:focus,
.btn.disabled:active, .btn:disabled:active,
.btn.disabled:active:focus, .btn:disabled:active:focus {
    box-shadow: none;
    cursor: not-allowed;
}
a.btn.disabled, fieldset:disabled a.btn {
    // needed to display the 'not-allowed' cursor on disabled buttons
    pointer-events: unset;
}

.btn > .btn-label {
    margin: 0;
    cursor: inherit;
}
.btn > i + .btn-label {
    margin-left: 4px;
}
.btn > .btn-label + i {
    margin-left: 4px;
}

.btn-group-sm > .btn, .btn-sm {
    padding: 3px 7px;
}