input,
textarea,
select {
    all: unset;
}

/* Main wrapper element around all */
.mio-form-wrapper {
    --mio-form-wrapper-horizontal: max-content;
}

/* Used when `x` value is present */
.mio-form-wrapper-horizontal {
    display: grid;
    grid-template-columns: var(--mio-form-wrapper-horizontal) auto;
}

/* Used when no `x` value is present */
.mio-form-wrapper-vertical {
    display: grid;
    row-gap: 2px;
}



.mio-form-wrapper-checkbox-reversed {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.mio-form-wrapper:focus-within {
    .mio-form-label-wrapper {
        @apply font-medium;
    }
}

.mio-form-wrapper-invalid {
    .mio-form-label-wrapper {
        @apply font-medium text-(--mio-label-error-lgt) dark:text-(--mio-label-error-drk);
    }
}






.mio-form-control-input {
    /* box-sizing: border-box;
    @apply pl-3 w-[100%];
    @apply bg-(--mio-input-bg-lgt) dark:bg-(--mio-input-bg-drk);
    @apply rounded-(--mio-input-radius);
    @apply h-(--mio-input-height);
    @apply inset-shadow-(--mio-input-inset-shadow-lgt) dark:inset-shadow-(--mio-input-inset-shadow-drk);
    @apply focus:inset-shadow-(--mio-input-inset-shadow-focus-lgt) focus:dark:inset-shadow-(--mio-input-inset-shadow-focus-drk);

    &.mio-form-control-input-invalid {
        @apply inset-shadow-(--mio-input-inset-shadow-error-lgt) dark:inset-shadow-(--mio-input-inset-shadow-error-drk);
        @apply focus:inset-shadow-(--mio-input-inset-shadow-error-focus-lgt) focus:dark:inset-shadow-(--mio-input-inset-shadow-error-focus-drk);
    } */
}

.mio-form-control-input-search {
    /* padding-left: 25px; */
}

.mio-form-control-textarea {
    --textarea-size: calc(var(--mio-input-height) * var(--rows));
    /* height: calc(var(--input-size) * var(--rows)); */
    @apply h-(--textarea-size);
    white-space: pre-wrap;
    word-wrap: break-word;
    resize: vertical;
    padding-top: 5px;
}

.mio-form-control-file {
    cursor: pointer;
}

.mio-form-control-icon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    padding-right: 4px;
    cursor: pointer;

    svg {
        height: 100%;
        width: auto;
        display: block;
    }
}

.mio-form-control-icon-search {
    left: 0;
    right: unset;
}

.mio-form-overlay {
    position: fixed;
    inset: 0;
    backdrop-filter: brightness(90%);
    z-index: 100000;
}

.mio-form-overlay-content {
    border: 1px solid var(--bg-sec-tnt);
    border-radius: var(--input-border-radius);
    opacity: 0;
    @apply bg-(--mio-overlay-content-bg-lgt) dark:bg-(--mio-overlay-content-bg-drk);

    overflow: hidden;
    height: fit-content;
    max-height: 100%;
    display: flex;
}



.mio-form-control-toggle {
    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;


}

.mio-form-control-toggle-wrapper {
    display: flex;
    align-items: center;
    @apply h-(--mio-input-height);
}

.mio-form-control-toggle-handle {
    border-radius: 10px;
    @apply bg-(--mio-toggle-clr-lgt) dark:bg-(--mio-toggle-clr-drk);
    top: 2px;
    bottom: 2px;
    left: 2px;
    transition: 200ms;
}

.mio-form-control-toggle-checked {
    grid-template-columns: 1fr var(--toggle-size) 0fr;

    .mio-form-control-toggle-handle {
        @apply bg-(--mio-toggle-checked-clr-lgt) dark:bg-(--mio-toggle-checked-clr-drk);
    }
}