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

:root {

    --controls__upload                    : url("../assets/svg/upload.svg");
    --controls__arrowup                   : url("../assets/svg/arrow-up-2.svg");
    --controls__arrowdown                 : url("../assets/svg/arrow-down-2.svg");
    --controls__upload-size               : 45px 45px;
    --controls__arrow-size                : 30px 30px;
    --controls__arrow-position            : 99% 50%;

/*    https://isotropic.co/tool/hex-color-to-css-filter/      */
    --svg-filter                          : invert(15%) sepia(95%) saturate(6781%) hue-rotate(5deg) brightness(97%) contrast(117%);

	--controls__placeholder-opacity       : 1;

    --controls__color                     : var(--site__color-text);
    --controls__color-back                : var(--site__color-light);
    --controls__color-back-disabled       : var(--site__color-neutral);
    --controls__border                    : 1px solid var(--site__color-neutral);
    --controls__border-radius             : 5px;
    --controls__height                    : 3em;

    --controls__case                      : none;

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

    --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-dropdown);
    --controls__placeholder-font          : var(--fw-regular) var(--controls__placeholder-font-size)/1.4 var(--ff-regular);

    --controls__button-font               : 400 2rem/1 var(--ff-regular);
    --controls__button-color              : var(--site__color-purple-lt);
    --controls__button-color-back         : var(--site__color-blue-dk);
    --controls__button-color-hover        : var(--site__color-light);
    --controls__button-color-hover-back   : hsl( from var(--controls__button-color-back) h s calc(l + 10) );
    --controls__button-border-radius      : 0.8rem;
}

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

.no-border {
    border                  : none;
}

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

label,
.label-text {
    font-size               : 0.7em;
    text-align              : left;
}

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

.alert {
    display                 : block;
    color                   : var(--site__color-alert);
    padding-top             : 0.3rem;
    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;
    outline                 : transparent;
    border                  : transparent;
    border-radius           : var(--controls__button-border-radius);
    padding                 : 1ex 2ch 0.9ex 2ch;
    cursor                  : pointer;

    color                   : var(--controls__button-color);
    background-color        : var(--controls__button-color-back);

        &:hover {
            color           : var(--controls__button-color-hover);
            background-color: var(--controls__button-color-hover-back);
        }

    @media all and (hover: none) {
        &:hover {
            color           : var(--controls__button-color);
            background-color: var(--controls__button-color-back);
        }
    }

}

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

::selection {
    color                   : var(--site__color-dark);
    background-color        : var(--site__color-light);
    opacity                 : 1;
}

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

.textbox, 
.combobox {
    font                    : var(--controls__font);
    width                   : 100%;
    height                  : var(--controls__height);
    outline                 : transparent;
    border                  : var(--controls__border);
    border-radius           : var(--controls__border-radius);
    padding-left            : 1em;
    color                   : var(--controls__color);
    background-color        : var(--controls__color-back);
}

.textbox:placeholder-shown {
    font                    : var(--controls__placeholder-font); }
.textbox:not(:placeholder-shown) {
    font                    : var(--controls__font); }

.textbox:disabled,
.combobox:disabled {
    font                    : var(--controls__placeholder-font);
    background-color        : var(--controls__color-back-disabled);
    opacity                 : 1;
}

/* Change autofill text in textbox and combobox */
select:-webkit-autofill,
input:-webkit-autofill { 
    font                    : var(--controls__placeholder-font);
    color                   : var(--controls__color);
    background-color        : var(--controls__color-back);
    -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 {
    -webkit-appearance      : none;
    -moz-appearance         : none;
    appearance              : none;
    
    color                   : var(--controls__color);

    background              : var(--controls__color-back) var(--controls__arrowdown) no-repeat right;
    background-size         : var(--controls__arrow-size);
    background-position     : var(--controls__arrow-position);
    
    position                : relative;
    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;

    &:invalid { font        : var(--controls__placeholder-font); }
    &:valid   { font        : var(--controls__font); }

    &:active, 
    &:focus {
        background          : var(--controls__color-back) var(--controls__arrowup) no-repeat right;
        background-size     : var(--controls__arrow-size);
        background-position : var(--controls__arrow-position);
    }

    /*  Apart from font, color and background-color this has little effect  */
    option {
        font                : var(--controls__dropdown-font);
        color               : var(--site__color-dark);
        background-color    : var(--controls__color-back);

        &:active {
            font-weight     : 700;
            color           : var(--controls__color);
        }

        &:first-child {
            font-weight     : 700;
        }
    }
}


/** ********************************************* **/
/** CHECK BOX AND RADIO BUTTONS                   **/
/** ********************************************* **/

.radio,
.checkbox {
    --_color-on         : var(--site__color-accent);
    --_color-off        : var(--controls__color-back);

    -webkit-appearance  : none;
    -moz-appearance     : none;
    appearance          : none;
    display             : inline-block;
    position            : relative;
    height              : 1.6rem;
    min-width           : 1.6rem;
    cursor              : pointer;
    outline             : transparent;

    color               : var(--controls__color);
    background-color    : var(--_color-off); 
    border              : var(--controls__border);
}

.checkbox {
    border-radius       : 0;

    &:checked::before {
        position        : relative;
        font            : bold 16px sans-serif;
        left            : 0.2em;
        top             : -0.1em;
        content         : '\02714';
    }
    &:hover {
        color           : var(--site__color-accent);
        background-color: var(--site__color-light);
    }
}

.radio { 
    border              : 3px solid transparent;
    border-radius       : 100svh;

    &:hover   { border-color : var(--_color-on);  }
    &:checked { border-color : var(--_color-off); background-color : var(--_color-on); }
}

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

.upload-panel {
    display                   : block;
    position                  : relative;
    color                     : var(--site__color-light);
    background                : var(--site__color-accent);
    text-align                : center;
    font-size                 : inherit;
    font-weight               : 700;
    padding                   : 1rem;
    border-radius             : var(--controls__border-radius);

    &:hover {
        background-color      : var(--site__color-hilite);
    }
}

.upload-button {
    position                  : relative;
    display                   : grid;
    align-content             : start;
    text-align                : center;
    text-transform            : none;
    font                      : var(--controls__placeholder-font);
    line-height               : 1;
    padding                   : 0 1rem;
    border-start-start-radius : var(--controls__border-radius);
    border-start-end-radius   : var(--controls__border-radius);
    overflow                  : hidden;
    width                     : 100%;
    height                    : 6rem;
    color                     : var(--site__color-light);
    background                : transparent var(--controls__upload) no-repeat center 2rem;
    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__color-back);
    margin                    : auto !important;
}

.upload-preview-panel img {
    height                    : inherit;
    width                     : 100%;
    margin                    : auto;
}

.upload-label {
    display                   : block;
    text-align                : center;
    font-size                 : 1rem;
    font-weight               : 400;
    line-height               : 1.4;
    color                     : var(--site__color-light);
    background-color          : transparent;
    border-end-start-radius   : var(--controls__border-radius);
    border-end-end-radius     : var(--controls__border-radius);
    padding-block-start       : 0.5rem;
}

/** ********************************************* **/
/** 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                   : 2px solid var(--site__color-accent);
    outline-offset            : 1px;
}