/* ********************************* *
* *        C O N T R O L S        * *
* ********************************* */

:root {

    --controls__upload                    : url("../assets/SVG/upload.svg");
    --controls__arrowup                   : url("../assets/SVG/arrow-up.svg");
    --controls__arrowdown                 : url("../assets/SVG/arrow-down.svg");
    --controls__upload-size               : 64px 64px;
    --controls__arrow-size                : 32px 32px;
    --controls__arrow-position            : bottom 50% right 5px;

	--controls__placeholder-opacity       : 1;

    --controls__color                     : var(--site__color-dark);
    --controls__background-color          : var(--site__color-light);
    --controls__disabled-background-color : var(--site__color-neutral);

    --controls__border                    : 1px solid transparent;
    --controls__border-radius             : 2px;
    --controls__height                    : 2em;

    --controls__case                      : uppercase;

    --controls__label-color               : var(--site__color-accent);

    --controls__font-size                 : 1.2rem;
    --controls__placeholder-font-size     : 1.2rem;
    
    --controls__font                      : var(--fw-bold)    var(--controls__font-size)/1.4 var(--ff-regular);
    --controls__dropdown-font             : var(--fw-regular) var(--controls__font-size)/1.4 var(--ff-option);
    --controls__placeholder-font          : var(--fw-regular) var(--controls__placeholder-font-size)/1.4 var(--ff-regular);
    --controls__list-font                 : var(--fw-regular) 1.0rem/2.4 var(--ff-option);

    --controls__button-font               : 700 1.6rem/1.2 var(--ff-regular);

    --controls__button-color              : var(--site__color-light);
    --controls__button-hover-color        : var(--site__color-hilite);
    --controls__button-background-color   : var(--site__color-accent);
    --controls__button-border-radius      : 2px;

    --controls__outline                   : 2px solid var(--site__color-accent);
    --controls__outline-hover             : 2px solid var(--site__color-accent);
    --controls__outline-offset            : 1px;
    --controls__box-shadow                : none; /*0px 0px 5px 5px #080B1E7f;*/

}

/** ********************************************* **/
/** MISCELLANEOUS                                 **/
/** ********************************************* **/

.no-border {
    border: none;
}

/** ********************************************* **/
/** LABELS                                        **/
/** ********************************************* **/

label, 
.label-text {
	display                 : inline;
    color                   : var(--controls__label-color);
    font-size               : 0.9em;
    font-weight             : var(--fw-bold);
    line-height             : 1.5;
    padding-bottom          : 0.5rem;
}

.label-text span:first-child {
    text-transform          : var(--controls__case);
}

.alert {
    display                 : block;
    font-size               : 1em;
    font-weight             : var(--fw-bold);
    line-height             : 1.2;
    color                   : var(--site__color-alert);
    background-color        : transparent;
    padding-top             : 0.5rem;
    padding-left            : 0.5rem;
}

/** ********************************************* **/
/** CONTAINERS                                    **/
/** ********************************************* **/

.grid-row {
    align-self              : center;
    justify-self            : start;
}

.row,
.row-center,
.button-container {
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    gap                     : 1rem;
}
.row {
    justify-content         : start;
}

.checkbox-container {
    display                 : flex;
    align-items             : center;
    justify-content         : left;
    gap                     : 0.6rem;
    min-width               : 10rem;
}

/** ********************************************* **/
/** LINK BUTTON AND ASP BUTTON                    **/
/** STYLED (PROMO) BUTTON                         **/
/** ********************************************* **/

button,
.aspbutton,
.promo-button,
.button-container a { 
    font                : var(--controls__button-font);
    text-transform      : var(--controls__case);
    text-decoration     : none;
    color               : var(--controls__button-color);
    background-color    : var(--controls__button-background-color);
    padding             : 1ex 2.5ch 0.8ex 2.5ch;
    border              : 3px solid var(--site__color-page);
    border-radius       : var(--controls__button-border-radius);
    cursor              : pointer;

    transition          : background-color 200ms ease-in-out, 
                                     color 50ms ease-in-out;

    &:hover {
        background-color: var(--controls__button-color);
        color           : var(--controls__button-background-color);
        outline         : var(--controls__outline-hover);
        outline-offset  : var(--controls__outline-offset);
    }
}

/** ********************************************* **/
/** TEXT BOX AND COMBO BOX                        **/
/** ********************************************* **/

.textbox::selection {
    color            : var(--site__color-light);
    background-color : var(--site__color-accent);
}

::placeholder {
    color            : var(--controls__color);
    text-transform   : var(--controls__case);
    font             : var(--controls__placeholder-font);
    opacity          : var(--controls__placeholder-opacity);
}

.textbox, 
.combobox {
    font             : var(--controls__font);
    width            : 100%;
    height           : var(--controls__height);
    border           : var(--controls__border);
    border-radius    : var(--controls__border-radius);
    padding-left     : 0.5em;
    color            : var(--controls__color);
    background-color : var(--controls__background-color);

    outline          : var(--controls__outline);
    outline-offset   : var(--controls__outline-offset);
/*    box-shadow       : var(--controls__box-shadow); */

    &:placeholder-shown {
        font         : var(--controls__placeholder-font);
    }

/*    
    &:not(:placeholder-shown):valid {
        border-color: var(--clr-success);
        background-color: color-mix(in srgb, var(--controls__background-color), var(--clr-success) 25%);
    }
    &:not(:placeholder-shown):invalid {
        border-color: var(--clr-error);
        background-color: color-mix(in srgb, var(--controls__background-color), var(--clr-error) 25%);
    }
    &:focus:invalid {
        border-color: var(--clr-warning);
        background-color: color-mix(in srgb, var(--controls__background-color), var(--clr-warning) 25%);
    }
*/
    &:disabled {
        font             : var(--controls__placeholder-font);
        font-weight      : var(--fw-bold);
        outline          : 3px solid transparent;

        font-size        : 1.8em;
        height           : auto;
        line-height      : 1;
        padding-left     : 0;
/*        
        background-color : var(--controls__disabled-background-color);
        opacity          : 0.5;
*/
    }
}

/* Change autofill text in textbox */
select:-webkit-autofill,
input:-webkit-autofill { 
    font                   : var(--controls__placeholder-font);
    background-color       : var(--controls__background-color);
    color                  : var(--controls__color);
    -webkit-text-fill-color: var(--controls__color);
}

select:-webkit-autofill, 
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

/** ********************************************* **/
/** COMBO BOX                                     **/
/** ********************************************* **/
 
.combobox {
    position           : relative;
    -webkit-appearance : none;
    -moz-appearance    : none;
    appearance         : none;
    color              : var(--controls__color);
    background         : var(--controls__background-color) var(--controls__arrowdown) no-repeat right;
    background-size    : var(--controls__arrow-size);
    background-position: var(--controls__arrow-position);
    z-index            : 0;
    text-indent        : 0.01px; /*In Firefox*/
    text-transform     : var(--controls__case); 
    text-overflow      : ellipsis;
    overflow           : hidden;
    white-space        : nowrap;
    padding-inline-end : 3em;
}

.combobox:invalid {
    font               : var(--controls__placeholder-font);
    color              : var(--controls__color);
}

.combobox:valid {
    font               : var(--controls__font);
}

.combobox:active, 
.combobox:focus {
    color              : var(--controls__color);
    background         : var(--controls__background-color) var(--controls__arrowup) no-repeat right;
    background-size    : var(--controls__arrow-size);
    background-position: var(--controls__arrow-position);
}

.combobox option {
    font               : var(--controls__list-font);
    color              : var(--site__color-dark);
    background-color   : var(--controls__background-color);
}

.combobox option:active {
    color              : var(--controls__color);
    font-weight        : var(--fw-bold);
}

.combobox option:first-child {
    color              : var(--site__color-accent);
    font-weight        : var(--fw-bold);
}

.combobox option:checked {
    font-weight        : var(--fw-bold);
 }

/** ********************************************* **/
/** CHECK BOX                                     **/
/** ********************************************* **/

.checkbox {
    -webkit-appearance        : none;
    -moz-appearance           : none;
    appearance                : none;
    display                   : inline-block;
    position                  : relative;
    color                     : var(--controls__color);
    background-color          : var(--controls__background-color);
    height                    : 1.6rem;
    min-width                 : 1.6rem;
    cursor                    : pointer;

    outline                   : var(--controls__outline);
    outline-offset            : var(--controls__outline-offset);
    box-shadow                : var(--controls__box-shadow);

}

.checkbox:hover {
    color                     : var(--site__color-light);
    background-color          : var(--site__color-accent);
}

.checkbox:checked::before {
    position                  : absolute;
    font-size                 : 14px;
    font-weight               : bold;
    font-family               : 'Open Sans', sans-serif;
    left                      : 0.5em;
    top                       : 0.15em;
    content                   : '\02143';
    transform                 : rotate(40deg);
}

/** ********************************************* **/
/** RADIO BUTTONS                                 **/
/** ********************************************* **/

.radio {
    -webkit-appearance        : none;
    -moz-appearance           : none;
    appearance                : none;
    display                   : inline-block;
    position                  : relative;
    color                     : var(--controls__color);
    background-color          : var(--controls__background-color);
    height                    : 1.6em;
    width                     : 1.6em;
    cursor                    : pointer;
    border                    : solid 5px var(--controls__color);
    background-color          : var(--controls__background-color);
    border-radius             : 50%;

    outline                   : var(--controls__outline);
    outline-offset            : var(--controls__outline-offset);
    box-shadow                : var(--controls__box-shadow);

}

.radio:hover {
    color                     : var(--site__color-light);
    background-color          : var(--site__color-accent);
}

/** ********************************************* **/
/** UPLOAD CONTROL AND PREVIEW PANEL              **/
/** ********************************************* **/

.upload-panel {
    display                   : block;
    position                  : relative;
    color                     : #000000;
    background                : var(--controls__background-color);
    text-align                : center;
    font-size                 : inherit;
    padding                   : 1rem;
    border-radius             : var(--controls__border-radius);

    outline                   : var(--controls__outline);
    outline-offset            : var(--controls__outline-offset);
    box-shadow                : var(--controls__box-shadow);
}

.upload-button {
    position                  : relative;
    display                   : grid;
    align-content             : start;
    text-align                : center;
    text-transform            : var(--controls__case);
    font                      : var(--controls__placeholder-font);
    line-height               : 1;
    padding                   : 1rem;
    border                    : 2px dashed var(--controls__background-color);
    border-start-start-radius : var(--controls__border-radius);
    border-start-end-radius   : var(--controls__border-radius);
    overflow                  : hidden;
    width                     : 100%;
    height                    : 5rem;
    color                     : var(--controls__color);
    background                : transparent var(--controls__upload) no-repeat center bottom;
    background-size           : var(--controls__upload-size);
    transition: color            .15s ease-in-out,
                background-color .15s ease-in-out,
                border-color     .15s ease-in-out,
                box-shadow       .15s ease-in-out;
}

.upload-control {
    opacity                   : 0;
    position                  : absolute;
    top                       : 0;
    left                      : 0;
    width                     : 100%;
    height                    : 100%;
    cursor                    : pointer;
}

.upload-preview-panel {
    display                   : none;
    max-width                 : 100%;
    transition                : height .3s ease-out;
    height                    : 0;
    overflow                  : hidden;
    background-color          : var(--controls__background-color);
    margin                    : auto !important;

    img {
        height                : inherit;
        width                 : 100%;
        margin                : auto;
    }
}

.upload-label {
    display                   : block;
    text-align                : center;
    font-size                 : 1rem;
    font-weight               : 700;
    line-height               : 1.8;
    color                     : var(--controls__color);
    background-color          : var(--controls__background-color);
    border-end-start-radius   : var(--controls__border-radius);
    border-end-end-radius     : var(--controls__border-radius);

    padding-top               : 1rem;
}

/** ********************************************* **/
/** FOR KEYBOARD NAVIGATION AND ACCESSABILITY     **/
/** ********************************************* **/

      .upload-panel:focus-within,
                  a:focus-visible,
             button:focus-visible,
             select:focus-visible,
             .radio:focus-visible,
           .textbox:focus-visible,
          .checkbox:focus-visible,
         .aspbutton:focus-visible,
      .promo-button:focus-visible,
.button-container a:focus-visible {
    outline                   : 4px solid var(--site__color-accent);
    outline-offset            : var(--controls__outline-offset);
}