:root {
    --button-font: "Open Sans", "Segoe UI", Arial, sans-serif;
    --button-stretch: 80%;
    --button-tracking: .03em;
    --button-sheen: linear-gradient(rgb(255 255 255 / .13), rgb(255 255 255 / 0) 60%);
    --button-drop: 0 4px 10px -3px;
    --button-drop-hover: 0 7px 16px -5px;
    --button-pressed: inset 0 2px 3px rgb(0 0 0 / .22), inset 0 0 0 1px rgb(0 0 0 / .05);
    --button-ease: cubic-bezier(.16, 1, .3, 1);
    --button-navy: #165084;
    --button-disabled: #e8ecf0;
    --button-disabled-ink: #6f7a85;
}

.btn-primary,
.nis2-btn-primary,
.nis2-btn-secondary {
    --button-fill: var(--button-navy);
    --button-fill-hover: #0d3b66;
    --button-glow: 13 59 102;
}

.btn-secondary,
.btn-default,
.btn-outline-secondary,
.btn-outline-primary,
.btn-app {
    --button-fill: #4c759e;
    --button-fill-hover: #3e6286;
    --button-glow: 76 117 158;
}

.btn-success {
    --button-fill: #2f775a;
    --button-fill-hover: #24614a;
    --button-glow: 47 119 90;
}

.btn-danger {
    --button-fill: #b42318;
    --button-fill-hover: #912018;
    --button-glow: 180 35 24;
}

.btn-info {
    --button-fill: #1f67a3;
    --button-fill-hover: var(--button-navy);
    --button-glow: 31 103 163;
}

.btn-dark {
    --button-fill: #33414e;
    --button-fill-hover: #1f2a35;
    --button-glow: 31 42 53;
}

.btn-warning {
    --button-fill: #b65b13;
    --button-fill-hover: #9f4c04;
    --button-glow: 126 59 2;
}

.btn-edit {
    --button-fill: #8e701b;
    --button-fill-hover: #7b5f04;
    --button-glow: 97 74 3;
}

.btn,
.btn-group-sm > .btn {
    border-radius: 6px;
}

.btn:focus-visible,
.close:focus-visible,
.nis2-btn-primary:focus-visible,
.nis2-btn-secondary:focus-visible {
    outline: 3px solid rgba(31, 103, 163, .5);
    outline-offset: 2px;
}

:is(.btn-primary, .btn-secondary, .btn-edit, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-app, .btn-success, .btn-danger, .btn-info, .btn-dark, .btn-warning, .nis2-btn-primary, .nis2-btn-secondary) {
    font-family: var(--button-font);
    font-stretch: var(--button-stretch);
    font-weight: 700;
    letter-spacing: var(--button-tracking);
    --button-lip: inset 0 -2px 0 rgb(0 0 0 / .2);
    --button-edges: var(--button-lip), 0 1px 1.5px rgb(var(--button-glow) / .5);
    transition: background-color .15s, box-shadow .2s var(--button-ease), translate .2s var(--button-ease);
}

@supports (color: oklch(from red l c h)) {
    :is(.btn-primary, .btn-secondary, .btn-edit, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-app, .btn-success, .btn-danger, .btn-info, .btn-dark, .btn-warning, .nis2-btn-primary, .nis2-btn-secondary) {
        --button-lip: inset 0 -2px 0 oklch(from var(--button-fill) calc(l - .2) c h);
    }
}

:is(.btn-primary, .btn-secondary, .btn-edit, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-app, .btn-success, .btn-danger, .btn-info, .btn-dark, .btn-warning, .nis2-btn-primary, .nis2-btn-secondary):not(:disabled):not(.disabled) {
    color: var(--button-ink, #fff);
    background-color: var(--button-fill);
    background-image: var(--button-sheen);
    background-origin: border-box;
    border-color: transparent;
    box-shadow: var(--button-edges), var(--button-drop) rgb(var(--button-glow) / .42);
}

:is(.btn-primary, .btn-secondary, .btn-edit, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-app, .btn-success, .btn-danger, .btn-info, .btn-dark, .btn-warning, .nis2-btn-primary, .nis2-btn-secondary):not(:disabled):not(.disabled):hover {
    color: var(--button-ink, #fff);
    background-color: var(--button-fill-hover);
}

@media (hover: hover) {
    :is(.btn-primary, .btn-secondary, .btn-edit, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-app, .btn-success, .btn-danger, .btn-info, .btn-dark, .btn-warning, .nis2-btn-primary, .nis2-btn-secondary):not(:disabled):not(.disabled):hover {
        box-shadow: var(--button-edges), var(--button-drop-hover) rgb(var(--button-glow) / .45);
        translate: 0 -1px;
    }
}

:is(.btn-primary, .btn-secondary, .btn-edit, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-app, .btn-success, .btn-danger, .btn-info, .btn-dark, .btn-warning, .nis2-btn-primary, .nis2-btn-secondary):not(:disabled):not(.disabled):is(:active:focus, :active, .active) {
    color: var(--button-ink, #fff);
    background-color: var(--button-fill-hover);
    background-image: linear-gradient(rgb(0 0 0 / .06), rgb(0 0 0 / 0) 50%);
    border-color: transparent;
    box-shadow: var(--button-pressed);
    translate: 0 2px;
    transition-duration: .15s, .06s, .06s;
}

.btn-link,
.btn-tool,
.close,
.btn:is(:disabled, .disabled),
:is(.nis2-btn-primary, .nis2-btn-secondary):is(:disabled, .disabled) {
    box-shadow: none;
    translate: none;
}

:is(.btn-primary, .btn-secondary, .btn-edit, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-app, .btn-danger, .btn-info, .btn-dark, .nis2-btn-primary, .nis2-btn-secondary):is(:disabled, .disabled) {
    color: var(--button-disabled-ink);
    background-color: var(--button-disabled);
    border-color: transparent;
    opacity: 1;
}

:is(.btn-success, .btn-warning):is(:disabled, .disabled) {
    font-family: inherit;
    font-stretch: inherit;
    font-weight: 400;
    letter-spacing: normal;
    opacity: 1;
}

.btn-success:is(:disabled, .disabled) {
    color: #2f775a;
    background-color: #f1f8f4;
    border-color: #bcdccd;
}

.btn-warning:is(:disabled, .disabled) {
    color: #92400e;
    background-color: #fdf8ec;
    border-color: #f0d9a8;
}

.btn-sm,
.btn-group-sm > .btn,
.table .btn {
    --button-drop: 0 2px 5px -2px;
    --button-drop-hover: 0 4px 9px -3px;
}

.btn-group,
.btn-group-vertical {
    gap: 6px;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    margin-left: 0;
    border-radius: 6px;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) {
    margin-top: 0;
    border-radius: 6px;
}

.table .btn-group {
    justify-content: center;
}

.table .btn-group > .btn {
    flex: none;
}

.input-group .btn {
    --button-drop: 0 0;
    --button-drop-hover: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .nis2-btn-primary,
    .nis2-btn-secondary {
        transition: none;
    }
}