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

.btn {
    background-color: var(--white);
    border: 0;
    box-shadow: var(--button-shadow);
    color: var(--button-color);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow .2s;
}
.btn:not(:disabled):not(.disabled):not(.btn-link):hover {
    border: 0;
    // needed because $btn-focus-box-shadow and $btn-active-box-shadow are ignored for .btn-primary, .btn-info, etc.
    box-shadow: var(--button-hover-shadow);
    color: var(--button-hover-color);
}
.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 {
    border: 0;
    // needed because $btn-focus-box-shadow and $btn-active-box-shadow are ignored for .btn-primary, .btn-info, etc.
    box-shadow: var(--button-active-shadow);
    color: var(--button-active-color);
}

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

.btn-secondary, .btn-secondary[disabled], .btn-secondary.disabled {
    background-color: var(--white);
    color: var(--button-color);
}
.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(--button-hover-color);
}

.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 {
    background: transparent;
    border-color: transparent;
    color: var(--link-color);
    box-shadow: none; // needed to make the button link look like a regular link
}
.btn-link:hover {
    color: var(--link-hover-color)
}
.btn-link-danger, .btn-link-danger:hover, .btn-link-danger:focus, .btn-link-danger:active, .btn-link-danger:active:focus {
    color: var(--red-600);
}
.btn-link-danger:hover {
    color: var(--red-500);
}

.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;
}