@import "phosphor-regular.css";
@import "phosphor-fill.css";

button > svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

button > *:not(.ph):not(.ph-fill), .btn > *:not(.ph):not(.ph-fill) {
    font-size: inherit;
}

button.primary.outline,
button.warning.outline,
button.success.outline,
button.danger.outline,
button.secondary.outline,
.btn-primary.outline,
.btn-warning.outline,
.btn-success.outline,
.btn-danger.outline {
    background-color: var(--primary-color);
}

button.primary.outline,
.btn-primary.outline {
    color: #06c;
}

button.primary.outline:active,
.btn-primary.outline:active {
    background-color: #cee3f9;
    color: #004c9e;
}

button.primary.outline:focus,
button.primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:hover {
    background-color: #f3f8fd;
    color: #005bb8;
}

button.danger.outline,
.btn-danger.outline {
    color: #dc3545;
}

button.danger.outline:active,
.btn-danger.outline:active {
    background-color: #fcdbda;
    color: #bd2130;
}

button.danger.outline:focus,
button.danger.outline:hover,
.btn-danger.outline:focus,
.btn-danger.outline:hover {
    background-color: #fef6f6;
    color: #c82333;
}

button.warning.outline,
.btn-warning.outline {
    color: #ff9800;
}

button.warning.outline:active,
.btn-warning.outline:active {
    background-color: #fcebce;
    color: #cc7a00;
}

button.warning.outline:focus,
button.warning.outline:hover,
.btn-warning.outline:focus,
.btn-warning.outline:hover {
    background-color: #fefaf3;
    color: #e68900;
}

button.success.outline,
.btn-success.outline {
    color: #28a745;
}

button.success.outline:active,
.btn-success.outline:active {
    background-color: #d9e9ce;
    color: #1e7e34;
}

button.success.outline:focus,
button.success.outline:hover,
.btn-success.outline:focus,
.btn-success.outline:hover {
    background-color: #f5f9f3;
    color: #218838;
}

button.secondary {
    color: #333;
    background-color: #e4e7eb;
    border-color: #e4e7eb;
}

button.secondary:hover, button.secondary:focus, button.secondary.focus {
    color: #222;
    background-color: #d4d8dd;
    border-color: #d4d8dd;
}

button.secondary:active, button.secondary.active, .open > button.secondary.dropdown-toggle {
    color: #111;
    background-color: #c4c8cd;
    border-color: #c4c8cd;
}

button.secondary.outline {
    border-color: #e0e0e0;
}

button.secondary.outline:active {
    color: #222;
    background-color: #f3f3f3;
    border-color: #ccc;
}

button.secondary.outline:focus, button.secondary.outline:hover, button.secondary.outline.focus {
    color: #333;
    background-color: #fafafa;
    border-color: #ccc;
}