button {
    cursor: pointer;
}

.trumbowyg-modal-box .trumbowyg-modal-button, .btn {
    color: var(--font-btn-primary);
    height: var(--button-height);
    border-radius: var(--global-radius);
    font-weight: normal;
    transition: var(--global-transition);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    padding: 0 10px;
    cursor: pointer;
    position: relative;
    appearance: none;
    outline: 0;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
    overflow: hidden;
    max-width: max-content;
}

.trumbowyg-modal-box .trumbowyg-modal-button > span, .btn > span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

.trumbowyg-modal-box .trumbowyg-modal-button:before, .btn:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: clip-path 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
    animation: opacityFallbackOut 0.5s step-end forwards;
}

.trumbowyg-modal-box .trumbowyg-modal-button:hover:before, .btn:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}

.btn:disabled {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
    cursor: not-allowed;
    filter: grayscale(1);
}

.btn-sm {
    height: calc(var(--button-height) * 0.8);
}

/* Color Variants with Animation Backgrounds */
.trumbowyg-modal-submit, .btn.primary {
    background-color: var(--primary-color);
}

.trumbowyg-modal-submit:before, .btn.primary:before {
    background-color: var(--primary-color-lighter);
}

.btn.secondary {
    background-color: var(--background-color);
    color: var(--font-color);
    border: var(--table-cell-border);
}

.trumbowyg-modal-reset {
    color: var(--font-color) !important;
}

.trumbowyg-modal-reset:hover, .btn.secondary:hover {
    color: var(--primary-color);
}

.trumbowyg-modal-reset:before, .btn.secondary:before {
    background-color: rgba(0,0,0,0.1);
}

.btn.success {
    background-color: var(--success-color);
}

.btn.success:before {
    background-color: rgba(var(--success-dark-rgb), 0.8);
}

.btn.warning {
    background-color: var(--warning-color);
}

.btn.warning:before {
    background-color: rgba(var(--warning-dark-rgb), 0.8);
}

.btn.danger {
    background-color: var(--danger-color);
}

.btn.danger:before {
    background-color: rgba(var(--danger-dark-rgb), 0.8);
}

/* Badge Variants */
.btn.badge {
    color: var(--font-btn-primary);
    border: var(--global-border);
    height: calc(var(--button-height) * 0.8);
    padding: 0 5px;
}

.btn.badge i {
    opacity: 0.9;
}

.btn.badge.secondary {
    color: var(--font-color);
}

.btn.badge.primary {
    color: var(--primary-color-darker);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    background-color: rgba(var(--primary-rgb), 0.05);
}

.btn.badge.primary:before {
    background-color: rgba(var(--primary-rgb), 0.15);
}

html.dark .btn.badge.primary {
    border: 1px solid var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.5);
}

.btn.badge.success {
    color: var(--success-color-darker);
    border: 1px solid rgba(var(--success-rgb), 0.15);
    background-color: rgba(var(--success-rgb), 0.05);
}

.btn.badge.success:before {
    background-color: rgba(var(--success-rgb), 0.15);
}

html.dark .btn.badge.success {
    border: 1px solid var(--success-color);
    background-color: rgba(var(--success-rgb), 0.5);
}

.btn.badge.warning {
    color: var(--warning-color-darker);
    border: 1px solid rgba(var(--warning-rgb), 0.15);
    background-color: rgba(var(--warning-rgb), 0.05);
}

.btn.badge.warning:before {
    background-color: rgba(var(--warning-rgb), 0.15);
}

html.dark .btn.badge.warning {
    border: 1px solid var(--warning-color);
    background-color: rgba(var(--warning-rgb), 0.5);
}

.btn.badge.danger {
    color: var(--danger-color-darker);
    border: 1px solid rgba(var(--danger-rgb), 0.15);
    background-color: rgba(var(--danger-rgb), 0.05);
}

.btn.badge.danger:before {
    background-color: rgba(var(--danger-rgb), 0.15);
}

html.dark .btn.badge.danger {
    border: 1px solid var(--danger-color);
    background-color: rgba(var(--danger-rgb), 0.5);
}

html.dark .btn.badge {
    color: var(--font-color);
}

.btn-list {
    display: none;
    flex-direction: column;
    background-color: var(--background-color);
    border-radius: var(--global-radius);
    min-width: 200px;
    border: var(--global-border);
    z-index: 1005;
    padding: 5px;
    gap: 5px;
    position: absolute;
    transition: var(--global-transition);
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.btn-list a,
.btn-list button:not(.clear-input) {
    width: 100%;
}

.btn-list button:not(.clear-input) {
    width: 100%;
    max-width: 100%;
}

.show-password {
    margin-left: -20px;
    padding-left: 28px;
    height: calc(var(--button-height) + 1px);
    border-radius: var(--global-radius);
    z-index: 2;
}

.swal2-confirm, .swal2-deny, .swal2-cancel {
    box-shadow: none !important;
    outline: none !important;
}

/* ############## FORM BUTTONS ############## */

.kfw-form-field-container .flex-it {
    position: relative;
}

.kfw-form-field-container {
    --kfw-clear-input-right: 5px;
    --kfw-clear-input-margin-top: 0;
}

.kfw-form-field-container .clear-input {
    position: absolute;
    right: var(--kfw-clear-input-right);
    top: calc(var(--input-height) / 6);
    margin-top: var(--kfw-clear-input-margin-top);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #888;
    z-index: 15;
    border-radius: var(--global-radius);
}

.kfw-form-field-container .clear-input:hover {
    color: #333;
}

.kfw-form-field-container .clear-input i {
    pointer-events: none;
}

.kfw-form-field-container:has(select) {
    --kfw-clear-input-right: 20px;
}

.kfw-form-field-container:has(.select2-container) {
    --kfw-clear-input-right: 20px;
}

.kfw-form-field-container:has(.select2-container):has(.select2-selection--multiple) {
    --kfw-clear-input-margin-top: 20px;
}

.kfw-form-field-container input[type="number"]::-webkit-inner-spin-button,
.kfw-form-field-container input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.kfw-form-field-container .form-field input[type="number"]::-webkit-inner-spin-button,
.kfw-form-field-container .form-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.kfw-form-field-container .form-field-button-container {
    border-top: var(--global-border);
    border-bottom: var(--global-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    z-index: 0;
    background: var(--body-background);
    color: var(--font-color);
    height: var(--input-height);
    border-left: var(--global-border);
    border-top-left-radius: var(--global-radius);
    border-bottom-left-radius: var(--global-radius);
    margin-right: -5px;
    padding: 0 5px 0 0;
}

.kfw-form-field-container .form-field-button-increase, .form-field-button-decrease {
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0;
    background: var(--body-background);
    height: calc((var(--input-height) / 2) - 1px);
    width: 30px;
    transition: var(--global-transition);
    border:none;
}

.kfw-form-field-container .form-field-button-increase {
    border-top-left-radius: var(--global-radius);
}

.kfw-form-field-container .form-field-button-decrease {
    border-top: var(--global-border);
    border-bottom-left-radius: var(--global-radius);
}

input[type="file"]::file-selector-button {
    padding: 0 16px;
    height: var(--input-height);
    cursor: pointer;
    background-color: var(--body-background);
    border-right: var(--global-border);
    border-left: none;
    border-top: none;
    border-bottom: none;
    margin-right: 16px;
    margin-left: -5px;
    transition: var(--global-transition);
    content: 'Sfoglia'
}

input[type="file"]::file-selector-button:active {
    background-color: var(--background-color);
}

.kfw-form-field-container .form-field-uploaded button {
    border: var(--global-border);
    margin-right: 1rem;
}

/* ############## TABLE BUTTONS ############## */

.kfw-filter-indicators button {
    color: var(--font-color);
    border: none;
    border-radius: var(--global-radius);
    background: rgba(0,0,0,0.1);
}

html.dark .kfw-filter-indicators button {
    background: rgba(255,255,255,0.1);
}

.btn.kfw-has-badge {
    position: relative;
    overflow: visible;
}

.btn.kfw-has-badge:before {
    border-radius: inherit;
}

.btn > span.kfw-btn-badge {
    position: absolute;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--danger-color);
    color: #ffffff;
    font-size: 11px;
    font-weight: 100;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    border: 2px solid var(--background-color);
    box-sizing: border-box;
    white-space: nowrap;
}

.btn > span.kfw-btn-badge-prefix {
    top: -10px;
}

.btn > span.kfw-btn-badge-suffix {
    bottom: -10px;
}