@use './css/vars' as *;

@use './css/modules' as *;

@use './css/resetAppearance' as *;
//@use './enhanceInputs-deuglify' as *;
@use './css/enhanceInputs-icons' as *;

@use './css/dialogs' as *;
@use './css/enhance_code' as *;
@use './css/details-enhanced-mod' as *;



/** hide on init */
.enhance-inputs-init {
    opacity: 0;
}

/** show on init */
html:has(.enhance-inputs-ready) [data-enhance-inputs] {
    opacity: 1;
}



/**
* reset
*/

body {
    font-family: 'Segoe UI', sans-serif;
    /*
    font-size: 18px;
    line-height: 1.4em;
    */
    color: var(--color-text);
}


::selection {
    background: var(--color-focus);
    color: var(--color-background);
}


.hide-picker {
    // padding-right:0em;
    mask-image: linear-gradient(to right,
            black calc(100% - var(--resizer-size, 1rem)),
            transparent calc(100% - var(--resizer-size, 1rem))),
        linear-gradient(to bottom,
            black calc(100% - var(--resizer-size, 1rem)),
            transparent calc(100% - var(--resizer-size, 1rem)));
    /*mask-composite: exclude; */
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    width: 100%;
}



.input {
    color: inherit;
    font-family: inherit;
}


/* labels */
.input-wrap-label {
    width: 100%
}

.label-span {
    font-weight: 700;
}

label:has(+.input-wrap-boxed) {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
}


/**
* custom styles
*/

.input-wrap-group {
    margin-bottom: 1rem;
}


.btn-default,
button {
    user-select: none;
}


.btn-inline{
margin:0!important
}

button.icn-inj,
.input-wrap {
    //@extend .pst-rlt;
    position: relative;
    display: inline-flex;
    //background-color: var(--color-background-input);
    gap: var(--padding-input);
    align-items: center;
}

.input-wide,
.input-wrap-wide {
    width: 100%;
}

.input-wrap-textarea {
    margin-bottom: 1rem;
}


.input-wrap-select-one {
    width: 100%
}


.input-wrap-number {
    width: 100%;
}

button.icn-inj:before,
.input-wrap-icon:before {
    content: " ";
    white-space: pre;
    width: 0;
    clip-path: inset(50%);
    margin-left: calc(var(--icn-margin) * -0.5);
}

/* input with picker: date , time, select */
.input-picker {
    mask-image: linear-gradient(to left, transparent 2.5rem, black 2.5rem);
    mask-repeat: no-repeat;
    mask-size: 100%;
    width: 100%
}


/* range sliders */
.input-wrap-range {
    @extend .input-wide;
    background-color: transparent;
}


/* btn like */
.btn-default,
.input-wrap-boxed {


    --icn-basline-shift: 0;



    //@extend .pst-rlt, .dsp-inl-blc;
    border: var(--border-width-input) solid var(--color-border);
    border-radius: var(--border-radius);

    /* reduce top padding for baseline adjustment */
    padding: calc(var(--padding-input) * 0.8) var(--padding-input) var(--padding-input) var(--padding-input);


    //padding: var(--padding-input);
    line-height: 1.5em;

    & input:focus,
    & input:focus-visible {
        // @extend .brd-non, .otl-non;
        border: none;
        outline: none;
    }

    /*
    &:focus-within:after {
        content: '';
        //@extend .pst-abs, .wdt-100, .dsp-blc;
        position: absolute;
        z-index: -1;
        inset: 0px;
        width: 100%;
        height: 100%;
        display: block;
        background-color: var(--color-background-input);
        filter: var(--filter-focus);
    }
    */



    &:focus,
    &:focus-within {
        --color-border: var(--color-focus);
        //background-color: var(--color-background-input);
        color: var(--color-focus-text);
        box-shadow: 0 0 4px 0px var(--color-focus);

    }
}

/* buttons */

.btn-default {
    border-color: var(--color-border-button);
    background-color: var(--color-background-input);
    text-align: center;
    font-weight: 700;
    padding: 0.4em 0.5em 0.5em 0.5em;
    display: inline-flex;
    padding: 0.5em;
    line-height: 1em;
    border-radius: 0.3rem;
    align-items: center;
    transition: 0.2s;
}

.btn-round {
    display: inline-flex;
    padding: 0.5em;
    line-height: 1em;
    border-radius: 0.3rem;
    align-items: center;
}


.btn-neg {
    --color-icon: var(--color-text-neg, #fff);
    background-color: var(--color-background-button);
    border-color: var(--color-background-button);
    color: var(--color-text-neg, #fff);
}


.input-submit {
    @extend .btn-default, .btn-neg;
}

.btn-file-custom {
    display: flex;
    align-items: center;
    gap: var(--icn-margin);
}

.btn-neg:focus {

    .icn-svg {
        color: var(--color-icon)
    }

    color: var(--color-text-neg)
}


.btn-default:focus,
.btn-default:hover {
    --color-icon: var(--color-text-hover);
    background-color: var(--color-background-hover);
    color: var(--color-text-hover);
    border-color: var(--color-background-hover);
    /* transform: scale(1.1) */
}


.drp-shd {
    box-shadow: 1px 1px 4px var(--color-text)
}


.btn-neg:hover {
    --color-background-hover: var(--color-background);
    --color-text-hover: var(--color-text);
    --color-icon: var(--color-background);
    border-color: var(--color-focus);
    background-color: var(--color-focus);
    color: var(--color-background);
}



/* textare toolbat btns */
.btn-toolbar:focus {
    outline: 1px solid var(--color-focus);
}

.btn-file {
    justify-content: center;
}

.input-wrap-file {

    display: block;
    width: 100%;
    border-radius: var(--border-radius);

    &:focus-within {

        &:after {
            display: none;
        }

        .btn-default {
            --color-border: var(--color-focus);
            background-color: var(--color-background);
            color: var(--color-focus);
            background: var(--color-background);
            filter: var(--filter-focus);
        }
    }
}



.no-focus:focus {
    @extend .otl-non;
}







/* numbers */

.input-wrap-number {
    //@extend .dsp-inl-flx, .alg-itm-cnt;
    display: inline-flex;
    align-items: center;
}

.input-number {
    font-feature-settings: "tnum";
    /* box-sizing: content-box; */
    width: calc(6ch + var(--border-width-input) *2);
}

/* enhance inputs */
label .input-number {
    width: 100%;
    flex: 1;
    text-align: right;
    padding-right: 0.5em;
}


.input-number-2 {
    width: calc(2ch + var(--border-width-input) *2);
}

.input-number-3 {
    width: calc(3ch + var(--border-width-input) *2);
}

.input-number-4 {
    width: calc(4ch + var(--border-width-input) *2);
}

.input-number-5 {
    width: calc(5ch + var(--border-width-input) *2);
}

.input-number-6 {
    width: calc(6ch + var(--border-width-input) *2);
}

.input-number-7 {
    width: calc(7ch + var(--border-width-input) *2);
}

.input-number-8 {
    width: calc(8ch + var(--border-width-input) *2);
}


.input-number-btns {
    width: max-content;
    font-family: monospace;
}

.input-number-btns .input-number-btn {
    @extend .apr-non, .brd-non;
    //appearance: none;
    background-color: transparent;
    //border: none;
    font-weight: 700;
    color: var(--color-icon);

    //margin-right: 0.05em;
    font-size: 1.2em;
    //line-height: 1.5em;
    line-height: 0.75em;

    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    text-align: center;
    padding: 0;
    transform: translateY(0.05em);


    &:focus {
        color: var(--color-focus);
        outline: 1px solid var(--color-focus);
    }
}


.input-number-btns .input-number-btn {}



/* checkbox and radio */
.enhanceInputs label {

    &:focus-within {
        //color: var(--color-focus);
        color: var(--color-focus-text);
    }

    & label:has(input) {
        margin-right: var(--icn-margin);
        margin-right: 0.5em;
    }
}


.input-wrap-checkbox,
.input-wrap-radio {

    margin-right: 0.5em;
    align-items: baseline;

    &:focus,
    &:focus-within {
        color: var(--color-focus);
    }

}



p:has(.input-wrap-checkbox),
p:has(.input-wrap-radio) {
    line-height: 1.5em
}




/* selects */
.input-wrap-select-one {
    padding: 0;
}

.input-wrap-select-one:before {
    display: none;
}


.input-select-one,
.input-select-one option {
    padding: calc(var(--padding-input) * 0.8) 0 var(--padding-input) var(--padding-input);
}




.input-select-one {
    @extend .otl-non, .apr-non, .brd-non;

    color: inherit;
    font-family: inherit;
    font-size: inherit;
    //border-color: transparent;
    //outline: none;
    //appearance: none;
    //border: 0 transparent;
}


select.input-select-multiple {
    padding: 0;
    border: 0;
}

.icn-wrp-select {
    padding: 0
}

.icn-input-select,
.option {
    @extend .apr-non;
    //appearance: none;
    padding: var(--padding-input) var(--padding-input) calc(var(--padding-input) * 0.666) var(--padding-input);

}

.input-select-one,
select,
::picker(select) {
    appearance: base-select;
}


/*
option{

//box-shadow:0px 0px 4px 0px rgba(0,0,0,0.5)
}
*/

.input-wrap-select-one:focus-within {
    appearance: base-select;
    box-shadow: 0px 0px 4px 1px var(--color-focus)
}


.option {
    padding: var(--padding-input, 0.3em);
    background: var(--color-background);
}

.option:focus,
.option:hover,
.option:checked {
    background-color: var(--color-focus);
    color: var(--color-text-neg);
}




/* tooltips */

.tooltip-info,
.tooltip {
    @extend .pst-abs, .dsp-blc, .pnt-evn-non, .usr-slc-non;
    opacity: 0;
    font-size: 0.8125rem;
    line-height: 1.2em;
    padding: 0.5em;
    bottom: -0.75em;
    right: -0.1em;
    background-color: var(--color-focus);
    color: #fff;
    width: calc(100% + var(--padding-input));

    min-width: min-content;
    max-height: 0;
    overflow: hidden;
    //display:none;

    border-radius: 0.3em;
    text-align: center;
    transform: translateY(calc(100% - var(--padding-input, 1rem) * 1.5));
    z-index: 1000;
    filter: drop-shadow(0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3));
    transition: 0.01s opacity;
    //transition: none;

    max-width: fit-content;

    &:before {
        @extend .pst-abs;
        content: '';
        right: 0;
        top: -1.5em;
        border: 1em solid transparent;
        border-bottom-color: var(--color-focus);
        width: 0em;
        height: 0em;
        display: block;
    }

}



/* show tooltips */
.btn-info-active+.tooltip-info,
.label:has(.tooltip):hover>.tooltip,
.has-tooltip:hover .tooltip,
.has-tooltip:hover~.tooltip {
    opacity: 1;
    max-height: inherit;
    overflow: visible;
    //display:block;
}


.btn-info {
    --color-icon: var(--color-border, #999);
    margin-right: 0.25rem;

    &:focus {
        --color-icon: var(--color-focus)
    }
}



.input-file-info:empty {
    @extend .dsp-non;
}

.input-file-info {
    padding: var(--padding-input)
}


.input-wrap-file {
    @extend .dsp-inl-blc;
    transition: 0.3s;
    width: 100%;
    background-color: transparent;
    padding: 0;
    border: 0;
}

.btn-file {
    @extend .wdt-100;
    //width: 100%;
}

.input-file-ul {
    @extend .pnt-evn-non;
    padding-left: 1em;
    margin: 0;

    //pointer-events: none;
}

.label-file {
    @extend .pnt-evn-non;
    //pointer-events: none;
}

.label-drop {
    @extend .dsp-non;
}

.input-file-drag-over {
    outline: 2px dotted #ccc;
    border-radius: var(--border-radius);
    padding: 0.5em;

}

.label-bold {
    font-weight: 700
}




/** textarea */
.input-textarea {
    @extend .wdt-100, .dsp-blc;
    resize: vertical;
    font-size: 0.9em;
}

.label-textarea {
    @extend .dsp-blc;
    font-weight: 700;
}


/* textarea */
.textarea-toolbar-span-size {
    padding-right: 0.5em;
    font-weight: 400;
}

.input-wrap-textarea-header {
    @extend .dsp-flx, .alg-itm-cnt;
    width: 100%;
}

.input-wrap-textarea-header-toolbar {
    @extend .dsp-inl-flx, .alg-itm-cnt, .jst-cnt-flx-end, .flx-0-0-aut;
    flex: 0 0 auto;
    gap: 0.2em;
    margin-left: auto;
    margin-right: -0.2em;
}

.input-wrap-textarea-header {
    --icn-basline-shift: -0.125em;
    position: relative;
}


label.input-wrap-textarea {
    overflow: hidden;
    min-height: 10lh;
}

.input-wrap-textarea-header:before {

    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    width: calc(100% - var(--padding-input));
    height: 2em;
    left: calc(var(--padding-input) * -1);
    left: 0;
    pointer-events: none;
    box-shadow: -30px 10px 15px 5px var(--color-background);
}

.input-textarea {
    @extend .hide-picker;
    padding-top: 1em;
}




.input-wrap-inline {
    @extend .dsp-inl-blc;
    display: inherit !important;
}


.input-wrap-textarea {
    display: flex;
    flex-direction: column;
}

.input-wrap-textarea-header {
    order: -1
}


.label-block {
    font-weight: 700;
    display: block;
}

.input-wrap-icon {
    display: inline-flex;
    align-items: center;


    /*
    .icn-svg {
        transform: translateY(0) scale(var(--icn-scale, 1));
    }
    */

}

/*
.svgAssets {
symbol path, symbol circle{
vector-effect: non-scaling-stroke;
}
}
*/


.img-wrp {
    position: relative
}


.img-inline {
    display: block;
    height: 1em;
    filter: grayscale(100%) brightness(100%);
}

.label:has(input:checked) {

    .img-inline {
        filter: none;
    }
}


/* tabs */


.tablist {
    display: flex;
    gap: 0em;
    border-bottom: 2px solid var(--color-border);
}


.tab-panel {
    padding-top: var(--padding-input);
    padding-top: 1em;
}




.btn-tab {

    position: relative;
    margin-bottom: -2px;
    margin-right: calc(var(--border-width-input) * -1);
    z-index: 10;
    font-weight: 700;
    padding: var(--padding-input);
    padding-left: 1em;
    padding-right: 1em;

    color: var(--color-text);
    border-color: var(--color-border);
    border-width: var(--border-width-input);
    border-style: solid;
    border-bottom-color: var(--color-background);

    &:focus {
        color: var(--color-focus)
    }

    &:after {
        content: '';
        display: block;
        height: 0.5rem;
        width: 100%;
        position: absolute;
        bottom: -0.25rem;
        left: 0;
        background: var(--color-background);
    }

}

.btn-tab[aria-selected=false] {
    opacity: 0.5;
    z-index: 0;
    border-bottom-color: transparent;
}

.btn-non {
    border: none;
    background: none;
}

.btn-tab-inner {
    display: inline-block;
}


label:has(+ .input-wrap-boxed) {
    display: flex;
    margin-bottom: 0rem;
    font-weight: 700;
}

a.btn,
a.btn-default {
    display: inline-flex;
    text-decoration: none;
    align-items: center;


    &:before {
        content: " ";
        white-space: pre;
        width: 0;
        clip-path: inset(50%);
        margin-left: calc(var(--icn-margin) * -0.5);
        margin-left: 0;
    }
}


.btn-toolbar:focus {
    outline: 1px solid var(--color-focus);
    background-color: var(--color-focus);
    border-radius: 50%;


    .icn-svg {
        color: var(--color-background);
    }

}



.btn-toolbar {
    text-align: center;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    height: 1em;
    width: 1em;
    padding: 0.75em;
    aspect-ratio: 1;


    // & *:before 
    &:before {
        display: none;
    }

    .icn-svg {
        //font-size: 1.2em;
        transform: none;
    }

    .icn-wrp-left {
        margin-right: 0;
    }

}



/* github badge */

.lnk-github {
    color: var(--color-text);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 5rem;
    line-height: 0em;
    z-index: 1000;
    width: 1em;
    height: 1em;
    display: block;
    text-align: right;
    padding: 0.15em;
    transition: 0.3s;
    overflow: hidden;
    filter: drop-shadow(0px -0px 4px black);
    //transform: translate(0, -2px) scale(1.1);

    svg {
        font-size: 0.3em;
        color: var(--color-background);
    }

    .icn-svg {
        transform: translate(0, -0.2em) scale(1.2);
    }



    &:hover {
        color: var(--color-focus);

    }

}







.lnk-github:before {
    content: "";
    display: block;
    border: 1.25em solid currentColor;
    border-bottom-color: transparent;
    border-left-color: transparent;
    position: absolute;
    inset: 0;
}





/** tables */
table {
    @extend .tbl-gap;
}


/** draggable */
.draggable-wrap {
    overflow: hidden;
}

.dialog-header {
    cursor: move;
}


.input-wrap-checkbox-switch {
    //--icn-basline-shift: 0.05em;
    //gap: 0.3em;
    padding-left: 0.1em;
    //margin-bottom: 0.2em;

    use {
        stroke-width: var(--icn-stroke-width);
        --fillSwitch1: transparent;
        //--fillSwitch2: transparent;
        --fillSwitch2: var(--color-icon);
        --strokeSwitch1: var(--color-icon);
        //--strokeSwitch2: var(--color-icon);
        --transSwitch: 0px;
    }

}

.input-wrap-checkbox-switch:has(input:checked) {
    use {
        --fillSwitch1: var(--color-icon);
        //--strokeSwitch2: var(--color-background);
        --fillSwitch2: var(--color-background);
        --transSwitch: 10px;
    }
}


.input-wrap-radio:hover,
.input-wrap-checkbox:hover {
    cursor: pointer
}

.label-span {
    font-weight: 400
}

.label-span-text,
.label-span-number,
.label-span-textarea {
    font-weight: 700
}






/*
.input-textarea {
    font-size: 0.9em;
}
.input-file-info {
    padding: var(--padding-input)
}

.input-file-ul {
    margin: 0;
}
*/


.icn-question {
    stroke-linecap: butt;
}