@media (prefers-color-scheme: dark) {
    /* scrollbar */
    ::-webkit-scrollbar { width: 0.5rem;}
    ::-webkit-scrollbar-button { background-color: rgb(255 255 255 / 15%); height: 0.5rem; }
    ::-webkit-scrollbar-track {  background-color: rgb(255 255 255 / 15%);}
    ::-webkit-scrollbar-track-piece { background-color: rgb(255 255 255 / 5%);}
    ::-webkit-scrollbar-thumb { height: 50px; background-color: rgb(255 255 255 / 15%); border-radius: 3px;}
    ::-webkit-scrollbar-corner { background-color: rgb(255 255 255 / 15%);}
    ::-webkit-resizer { background-color: rgb(255 255 255 / 20%);}

    /* slimselect */
    .ss-main .ss-multi-selected, .ss-main .ss-single-selected, .ss-content, .ss-search input {
        background-color: var(--bulma-body-background-color) !important;
        color: hsl(var(--bulma-input-h),var(--bulma-input-s),var(--bulma-input-color-l));
    }
    .ss-content .ss-list .ss-option.ss-disabled {
        /* TODO: fixme */
        background-color: rgb(255 255 255 / 15%) !important;
        color: black !important;
    }
    .ss-main .ss-multi-selected .ss-values .ss-value {
        /* TODo: fixme */
        background-color: #0a8dd1 !important;
    }

    /* custom state button */
    .button.state_button {
        button {
            background-color: hsl(var(--bulma-button-h),var(--bulma-button-s),calc(var(--bulma-button-background-l) + var(--bulma-button-background-l-delta))) !important;
        }

        .navbar-dropdown {
            z-index: 1;

            form {
                margin-bottom: 0;
            }
        }
    }
    input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] {
        &::-webkit-calendar-picker-indicator {
          filter: invert(1);
        }
    }
    .ss-main .ss-multi-selected, .ss-single-selected {
        border: 1px solid hsl(221, 14%,calc(24% + 0%)) !important;
    }
}