.mtwc {
    @apply flex-1 select-none;
}
.mtwc-header {
    @apply flex text-lg;
    @apply bg-teal-400;
}
.mtwc-title {
    @apply flex-1 flex items-center justify-center py-1 font-medium;
}
.mtwc-arrow {
    @apply flex items-center justify-center p-1 cursor-pointer;
}
.mtwc-day {
    @apply flex items-center justify-center cursor-pointer py-1;
    @apply bg-red-500;
}
.mtwc-days {
    @apply grid grid-cols-[repeat(7,1fr)]
}
.mtwc-off {
    @apply bg-green-100;
}
.mtwc-today {
    @apply bg-yellow-100;
}
.mtwc-selected {
    @apply bg-purple-100 font-medium;
}
.mtwc-weekday {
    @apply flex items-center justify-center py-1 font-medium;
    @apply bg-blue-500;
}

.mtws {
    @apply flex flex-col flex-1;
    @apply bg-purple-200;
}
.mtws-options {
    @apply flex-1 overflow-y-auto;
}
.mtws-option {
    @apply cursor-pointer p-1 pl-2;
}
.mtws-selected {
    @apply bg-red-400 font-medium;
}
.mtws-search {
    @apply bg-green-100;
    input {
        @apply pl-2;
    }
}

/* Wraps the input */
.mtwi {
    @apply relative w-[100%];

    input, textarea {
        @apply pl-3 w-[100%] box-border;
        @apply h-[24px] rounded-[3px];
        
        @apply bg-slate-200 dark:bg-slate-700;
        @apply inset-shadow-[0_0_0_1px]; 
        @apply inset-shadow-slate-500 dark:inset-shadow-slate-500;
        @apply group-focus-within:inset-shadow-[0_0_0_2px];
        @apply group-focus-within:inset-shadow-sky-500;
    }
    textarea {
        --s: calc(var(--rows) * 24px);
        @apply h-(--s);
    }
}

.mtwi-search {
    input {
    @apply pl-8;
    }
}

.mtwi-invalid {
    input, textarea {
        @apply inset-shadow-[0_0_0_2px];
        @apply inset-shadow-red-500 dark:inset-shadow-slate-500;
        @apply group-focus-within:inset-shadow-red-900;
    }
}

.mtwf {
  --mio-form-wrapper-horizontal: max-content;
}
.mtwf-invalid {
    .mtwl {
        @apply text-red-500;
    }
}

.mtwl {
    @apply flex gap-1 items-center pl-1;
    @apply group-focus-within:font-medium;
}

.mtwt {
    @apply flex items-center;
    @apply h-[24px] py-1;
}



.mtwt-box {
        /* cursor: pointer;
    --toggle-size: calc(var(--mio-input-height) * 0.8);
    --animation-time: 100ms;



    @apply inset-shadow-(--mio-input-box-shadow-lgt) dark:inset-shadow-(--mio-input-box-shadow-drk);
    @apply bg-(--mio-input-bg-lgt) dark:bg-(--mio-input-bg-drk);

    width: 40px;
    height: var(--toggle-size);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 0fr var(--toggle-size) 1fr;
    transition: var(--animation-time);
    padding: 2px; */
    @apply inset-shadow-[0_0_0_1px]; 
    @apply inset-shadow-slate-500 dark:inset-shadow-slate-500;
    @apply cursor-pointer flex;
    @apply rounded-[2px] h-[100%] aspect-square  overflow-hidden;
    @apply duration-200;
}

.mtwt-box-checked {
    /* @apply grid-cols-[1fr_auto]; */
    .mtwt-handle {
        @apply flex;
    }

}

.mtwt-handle {
    @apply bg-sky-600 hidden flex-1 items-center justify-center text-white text-[9px];
}


.monospace {
    @apply font-mono;
}