@use '../styles/fonts';

// 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 {
        @extend .fw-450;
    }

    .mio-form-control-input {
        box-shadow: var(--input-box-shadow-focus);
    }
}

.mio-form-wrapper-invalid {
    .mio-form-label-wrapper {
        @extend .fw-450;
        color: var(--btn-bg-red);
    }

    .mio-form-control-input {
        box-shadow: inset 0 0 0 2px var(--btn-bg-red);
    }
}

.mio-form-wrapper-invalid:focus-within {
    .mio-form-control-input {
        box-shadow: inset 0 0 0 2px var(--btn-bg-red-tnt);
    }
}

.mio-form-control-wrapper {
    position: relative;
    width: 100%;
}

.mio-form-control-input {
    box-sizing: border-box;
    // border: 1px solid hsl(0, 0%, 30%);
    box-shadow: var(--input-box-shadow);
    border-radius: var(--input-border-radius);
    width: 100%;
    height: var(--input-size);
    padding-left: 10px;
    background-color: var(--bg-sec);

    // vertical-align: center;
    &-search {
        padding-left: 25px;
    }
}

.mio-form-control-textarea {
    height: calc(var(--input-size) * var(--rows));
    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: 3px;
    padding: 2px;
    padding-right: 4px;
    cursor: pointer;

    &-search {
        left: 0;
        right: unset;
    }

    svg {
        height: 100%;
        width: auto;
        display: block;
        // border: 1px solid red;
    }
}

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

    &-content {
        border: 1px solid var(--bg-sec-tnt);
        border-radius: var(--input-border-radius);
        opacity: 0;
        background-color: var(--bg-pri);
        overflow: hidden;
        height: fit-content;
        max-height: 100%;
        display: flex;
    }
}

.mio-form-label {
    &-wrapper {
        display: flex;
        align-items: center;
        padding-left: 3px;
        gap: 2px;
    }

    &-element {
        // @extend .fw-500;
    }
}


.mio-form-control-toggle {
    cursor: pointer;
    --toggle-size: calc(var(--input-size) * 0.8);
    --animation-time: 100ms;



    box-shadow: var(--input-box-shadow);
    background-color: var(--bg-sec);
    width: 40px;
    height: var(--toggle-size);
    border-radius: 10px;
    // padding: 2px;
    display: grid;
    grid-template-columns: 0fr var(--toggle-size) 1fr;
    transition: var(--animation-time);
    padding: 2px;

    &-wrapper {
        display: flex;
        align-items: center;
        // justify-content: center;
        height: var(--input-size);
    }

    &-handle {
        border-radius: 10px;
        background-color: var(--bg-sec-tnt);
        top: 2px;
        bottom: 2px;
        left: 2px;
        transition: 200ms;

    }

    &-checked {
        grid-template-columns: 1fr var(--toggle-size) 0fr;

        .mio-form-control-toggle-handle {
            background-color: var(--btn-bg-blu);
        }
    }
}