@font-face {
    font-family: 'KalbeSystem';
    src: url('../static/fonts/KalbeSystem-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'KalbeSystem';
    src: url('../static/fonts/KalbeSystem-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'KalbeSystem';
    src: url('../static/fonts/KalbeSystem-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'KalbeSystem';
    src: url('../static/fonts/KalbeSystem-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'KalbeSystem';
    src: url('../static/fonts/KalbeSystem-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

:root {
    --bs-body-font-family: 'KalbeSystem', sans-serif;
}

.htmx-indicator {
    opacity: 0;
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
    opacity: 1;
}

.dt-column-title {
    font-weight: bold !important;
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
[disabled] {
    cursor: not-allowed !important;
    pointer-events: all !important;
}

@media (prefers-color-scheme: dark) {
    .ts-control,
    .full .ts-control,
    .ts-wrapper.single.input-active .ts-control {
        background-color: var(--bs-body-bg);
        border: var(--bs-border-width) solid var(--bs-border-color);
        color: var(--bs-body-color);
    }

        .ts-control > input {
            color: var(--bs-body-color);
        }

    .ts-wrapper:not(.form-control):not(.form-select).single .ts-control,
    .ts-wrapper.single:not(.form-control):not(.form-floating.form__text-area):not(.form-select) .ts-control {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
        border-inline-start-color: var(--bs-border-color);

        &:hover {
            background-color: var(--bs-secondary-bg);
        }
    }

    .ts-wrapper.multi .ts-control > div {
        background-color: var(--bs-secondary-bg);
        color: var(--bs-body-color);
    }

    .ts-dropdown {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);

        .active {
            background-color: var(--bs-secondary-bg);
            color: var(--bs-body-color);
        }

        [data-selectable] .highlight {
            background: $yellow-800;
        }
    }
}