/* ********************************* *
     * *        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               : 32px 40px;
    --controls__arrow-size                : 40px 36px;
    --controls__arrow-position            : bottom 50% right 0;

	--controls__placeholder-opacity       : 1;

    --controls__color                     : #00A982;
    --controls__color-back                : #FFFFFF;
    --controls__disabled-background-color : var(--site__color-disabled);
    --controls__border-radius             : 0;

    --controls__case                      : none;
    --controls__height                    : 3rem;

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

    --controls__placeholder-font          : var(--fw-regular)  1.6rem/1.2 var(--ff-regular);
    --controls__font                      : var(--fw-semibold) 1.6rem/1.2 var(--ff-regular);
    --controls__button-font               : var(--fw-bold)     1.8rem/1.4 var(--ff-heading);
    --controls__option-font               : var(--fw-regular)  1.1rem/1.4 var(--ff-option);

    --controls__button-color              : var(--site__color-light);
    --controls__button-background-color   : #00A982;
    --controls__button-border-radius      : 999px;
}

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

.no-border {
    border: none;
}

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

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

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

.row-center {
    justify-content: center;
}

.button-container {
    justify-content: center;
    gap: 2rem;
}

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

.label-text {
    color: var(--controls__label-color);
    font-size: 1rem;
    text-align: justify;

    a {
        color: inherit;
        &:hover {
            color: var(--site__color-accent);
        }
    }

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


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

.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              : 0.6rem 2rem 0.4rem 2rem;
    outline              : transparent;
    border               : none;
    border-radius        : var(--controls__button-border-radius); 
    cursor               : pointer;

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

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

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

.textbox {
    font                 : var(--controls__font);
}

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

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

/** ********************************************* **/
/** COMBO BOX                                     **/
/** ********************************************* **/
 
.combobox {
    -webkit-appearance      : none;
    -moz-appearance         : none;
    appearance              : none;
    
    background              : var(--controls__color-back) var(--controls__arrowdown) no-repeat right;
    background-size         : var(--controls__arrow-size);
    background-position     : var(--controls__arrow-position);
    
    text-indent             : 0.01px; /*In Firefox*/
    text-overflow           : ellipsis;
    overflow                : hidden;
    white-space             : nowrap;
    text-transform          : var(--controls__case); 
    border                  : none;

    padding-inline-end      : 2.5em;

    position                : relative;
    z-index                 : 0;

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

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

    option {
        font                : var(--controls__option-font);
        font-weight         : var(--fw-regular);
        color               : var(--controls__color);
        background-color    : var(--controls__color-back);

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

        &:first-child {
            font-weight     : var(--fw-bold);
            color           : var(--controls__color);
        }

        &:checked {
            color           : var(--site__color-accent);
            font-weight     : var(--fw-bold);
        }
    }
}

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

/* Change text in autofill textbox
input:-webkit-autofill {
    -webkit-text-fill-color: var(--site__color-text);
}*/

.textbox:disabled,
.combobox:disabled {
    background-color        : var(--controls__disabled-background-color);
    opacity                 : 0.5;
}

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

.textbox::selection,
.combobox::selection {
    background-color        : var(--site__color-accent);
    opacity                 : 0.5;
}

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

.checkbox,
.radio {
    -webkit-appearance  : none;
    -moz-appearance     : none;
    appearance          : none;
    display             : inline-block;
    position            : relative;
    color               : var(--controls__color);
    background-color    : var(--controls__color-back);
    height              : var(--controls__height);
    min-width           : var(--controls__height);
    cursor              : pointer;
    outline             : transparent;

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

.checkbox {
    &:checked::before {
        position         : absolute;
        font             : 900 3rem system-ui,sans-serif;
        left             : 0.1em;
        top              : -0.2em;
        content          : '\02713';
    }
}

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

.radio {
    border               : solid 5px var(--controls__color);
    border-radius        : 50%;
}

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

.upload-panel {
    display                   : block;
    position                  : relative;
    color                     : #959190;
    background-color          : transparent;
    text-align                : center;
    font-size                 : inherit;
}

.upload-button {
    position                  : relative;
    display                   : grid;
    align-content             : start;
    text-align                : center;
    text-transform            : var(--controls__case);
    font                      : var(--controls__placeholder-font);
    outline                   : transparent;
    border                    : 1rem solid var(--controls__color-back);
    border-radius             : var(--controls__border-radius) var(--controls__border-radius) 0 0;
    overflow                  : hidden;
    width                     : 100%;
    height                    : 7rem;
    color                     : var(--controls__color);
    background                : var(--controls__color-back) 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__color-back);
    margin                    : auto !important;

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

.upload-label {
    display                   : block;
    text-align                : center;
    font-size                 : 1rem;
    font-weight               : var(--fw-bold);
    line-height               : var(--lh-base);
    color                     : var(--controls__button-color);
    background-color          : var(--controls__button-background-color);
    border-radius             : 0 0 var(--controls__border-radius) var(--controls__border-radius);
}