@use 'modules' as *;

:where(.enhanceInputs, [data-enhance-inputs]) {

    fieldset {
        padding-top: 1rem;
        padding-left: 0;
        padding-right: 0;
        border-color: var(--color-focus);
        border-width: calc(var(--border-width-input) * 2);
        border-style: solid none none none;
        border-width: 1cap;
    }

    legend {
        font-weight: 700;
        padding-right: 0.5em;
        transform: translateY(0em);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-focus);
    }

    h1,
    h2,
    h3,
    h4,
    p {
        margin: 0 0 1rem 0;
    }

    :is(p, pre, ul, table, iframe)+ :is(h1, h2, h3) {
        margin-top: 2rem;
    }

    textarea {
        min-height: 10lh;
        width: 100%;
        //@extend .wdt-100, .dsp-blc;
        /*
        display: block;
        resize: vertical;
        */
    }

    .btn-default,
    input[type=button],
    input[type=submit],
    button {
        cursor: pointer;
        position: relative;
    }

    /* multi selects*/
    select[multiple] {
        width: 100%;
        border: var(--border-width-input) solid var(--color-border);
        background-color: var(--color-background-input);
        border-radius: var(--border-radius)
    }


    /* hide search delete buttons */
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        display: none;
    }

    /* Firefox */
    input[type="search"]::-moz-search-clear-button {
        display: none;
    }


    /* reset */
    input::file-selector-button,
    button,
    input,
    textarea,
    select {
        //@extend .apr-non, .mrg-0, .pdd-non, .brd-0;
        appearance: none;
        font-family: inherit;
        font-size: inherit;
        line-height: 1.5em;
        margin: 0;
        padding: 0;
        padding-block: 0;
        padding-inline: 0;
        border: none;
        background-color: transparent;

        &:focus-within {
            outline: none;
        }


    }


    /** range slider **/
    input[type=range] {
        @extend .dsp-blc, .wdt-100, .apr-non;
        /*
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        display: block;
        width: 100%;
        */
        font-size: 1em;
        height: 1em;
        background: transparent;
        cursor: pointer;
    }

    input[type=range]:focus-visible,
    input[type=range]:focus {
        //outline: none;
        @extend .otl-non;
    }

    input[type=range]::before {
        //display: inline-block;
        @extend .dsp-inl-blc;

        width: 0.75em;
        line-height: 0px;
        transform: translateY(0.05em);
    }

    /***** Chrome, Safari, Opera and Edge Chromium styles *****/
    /* slider track */
    input[type=range]::-webkit-slider-runnable-track {
        background-color: var(--color-range-track);
        border-radius: 1em;
        height: var(--height-range-track);
    }

    input[type=range]::-webkit-slider-thumb {
        //@extend .apr-non;

        appearance: none;
        transform: translateY(calc(-50% + var(--height-range-track) * 0.5));

        background-color: var(--color-range-thumb);
        height: 1.25em;
        width: 1.25em;
        border-radius: 50%;
        border: 0.2rem solid var(--color-background, #fff);
        //background: var(--color-background, #fff);

    }


    input[type=range]:focus::-webkit-slider-thumb {
        background-color: var(--color-focus, #000);
    }

    input[type=range]:focus::-webkit-slider-thumb,
    input[type=range]:focus-visible::-webkit-slider-thumb {
        filter: drop-shadow(0 0 0.1rem var(--color-focus));
    }


    input[type=range]:focus,
    input[type=range]:focus-within {
        --color-range-track: var(--color-focus);
        --color-range-thumb: var(--color-focus);
    }



    /******** Firefox styles ********/
    /* slider track */
    input[type=range]::-moz-range-track {
        background-color: var(--color-range-track);
        border-radius: 1em;
        height: var(--height-range-track);
    }

    /* slider thumb */
    input[type=range]::-moz-range-thumb {
        @extend .apr-non, .brd-non;

        //border: none;
        //-webkit-appearance: none;
        //-moz-appearance: none;
        //appearance: none;
        /* transform: translateY(calc(-50% + var(--height-range-track) * 0.5)); */
        transform: translateY(0%);

        /*custom styles*/
        background-color: var(--color-range-thumb);
        height: 1em;
        width: 1em;
        border-radius: 1em;
        border: 0.2rem solid var(--color-background, #fff);

    }

    input[type=range]:focus::-moz-range-thumb {
        background-color: var(--color-focus);
    }

    input[type=range]:focus::-moz-slider-thumb,
    input[type=range]:focus-visible::-moz-slider-thumb {
        filter: var(--filter-focus);
    }


    /* range with number */
    .input-wrap-range-num {
        @extend .dsp-flx, .alg-itm-cnt, .wdt-100;

        //display: flex;
        //width: 100%;
        //align-items: center;
        gap: 1em;
    }

    .input-wrap-number {
        @extend .flx-1-0-aut;
        //flex: 1 0 auto;
    }



    ul{
        @extend .li-bll;

    }

    ol{
        @extend .li-num
    }

}