/* 
    ui.css
    Handles styles for every common user interface element
    Quick references for every element class name is below

    Buttons
        ui_button_large
        ui_button_grid
        ui_button_icon
        ui_button_smallicon
        ui_button_small

    Text
        ui_text_header
            ui_text_header_left
        ui_text_subheader
            ui_text_subheader_left
        ui_text_body
        ui_text_description

    Image
        ui_image_generic

    Status Boxes
        ui_status_info
        ui_status_warning
        ui_status_critical

        ui_status_text
        ui_status_icon

    Text Areas
        ui_input_generic

    Spacers
        ui_spacer

    Separators
        ui_separator_vertical
        ui_separator_horizontal

    Dialog
        ui_dialog_generic
            ui_dialog_generic_top
                ui_dialog_generic_top_text
                ui_dialog_generic_top_close
*/

/* Buttons */
.ui_button_large {
    background-color: var(--default-glass-background);
    color: var(--default-text-color);
    border-radius: 100px;
    border: var(--default-glass-border);
    transition: var(--default-transition);
    font-size: clamp(1.6vh, 16px, 1.6vw);
    font-family: var(--default-font-family);

    backdrop-filter: var(--default-glass-blur);

    padding: clamp(1vh, 10px, 1vw);
    padding-left: clamp(3vh, 30px, 3vw);
    padding-right: clamp(3vh, 30px, 3vw);
    margin-left: clamp(1vh, 10px, 1vw);
    margin-right: clamp(1vh, 10px, 1vw);
    margin-top: clamp(0.5vh, 5px, 0.5vw);
    margin-bottom: clamp(0.5vh, 5px, 0.5vw);

    width: fit-content;

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_button_large:hover:enabled {
    scale: 1.05;
    cursor: pointer;
}

.ui_button_large:active:enabled {
    scale: 0.95;
}

.ui_button_large:disabled {
    scale: 0.9;
    opacity: 0.7;
}

.ui_button_grid {
    background-color: var(--default-glass-background);
    color: var(--default-text-color);
    border-radius: 10px;
    border: var(--default-glass-border);
    transition: var(--default-transition);
    font-size: clamp(1.6vh, 16px, 1.6vw);
    font-family: var(--default-font-family);

    backdrop-filter: var(--default-glass-blur);

    padding: clamp(1vh, 10px, 1vw);
    padding-left: clamp(3vh, 30px, 3vw);
    padding-right: clamp(3vh, 30px, 3vw);
    margin-left: clamp(1vh, 10px, 1vw);
    margin-right: clamp(1vh, 10px, 1vw);
    margin-top: clamp(0.5vh, 5px, 0.5vw);
    margin-bottom: clamp(0.5vh, 5px, 0.5vw);

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_button_grid:hover:enabled {
    scale: 1.05;
    cursor: pointer;
}

.ui_button_grid:active:enabled {
    scale: 0.95;
}

.ui_button_grid:disabled {
    scale: 0.9;
    opacity: 0.7;
}

.ui_button_icon {
    background-color: var(--default-glass-background);
    color: var(--default-text-color);
    border-radius: 100px;
    border: var(--default-glass-border);
    transition: var(--default-transition);
    font-size: clamp(2.2vh, 22px, 2.2vw);
    font-family: var(--default-font-family);

    backdrop-filter: var(--default-glass-blur);

    padding: clamp(1vh, 10px, 1vw);
    margin-left: clamp(1vh, 10px, 1vw);
    margin-right: clamp(1vh, 10px, 1vw);

    width: clamp(4.5vh, 45px, 4.5vw);
    height: clamp(4.5vh, 45px, 4.5vw);

    aspect-ratio: 1;

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_button_icon:hover:enabled {
    scale: 1.1;
    cursor: pointer;
}

.ui_button_icon:active:enabled {
    scale: 0.9;
}

.ui_button_icon:disabled {
    scale: 0.9;
    opacity: 0.7;
}

.ui_button_smallicon {
    background-color: var(--default-glass-background);
    color: var(--default-text-color);
    border-radius: 100px;
    border: var(--default-glass-border);
    transition: var(--default-transition);
    font-size: clamp(1.5vh, 15px, 1.5vw);
    font-family: var(--default-font-family);

    backdrop-filter: var(--default-glass-blur);

    padding: clamp(0.2vh, 2px, 0.2vw);
    margin-left: clamp(0.5vh, 5px, 0.5vw);
    margin-right: clamp(0.5vh, 5px, 0.5vw);

    margin-top: auto;
    margin-bottom: auto;

    aspect-ratio: 1;
    width: clamp(3.5vh, 35px, 3.5vw);
    height: clamp(3.5vh, 35px, 3.5vw);

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_button_smallicon:hover:enabled {
    scale: 1.05;
    cursor: pointer;
}

.ui_button_smallicon:active:enabled {
    scale: 0.95;
}

.ui_button_smallicon:disabled {
    scale: 0.95;
    opacity: 0.7;
}

.ui_button_small {
    background-color: var(--default-glass-background);
    color: var(--default-text-color);
    border-radius: 100px;    
    border: var(--default-glass-border);
    transition: var(--default-transition);
    font-size: clamp(1.4vh, 14px, 1.4vw);
    font-family: var(--default-font-family);

    backdrop-filter: var(--default-glass-blur);

    padding: clamp(0.5vh, 5px, 0.5vw);
    padding-left: clamp(1.5vh, 15px, 1.5vw);
    padding-right: clamp(1.5vh, 15px, 1.5vw);
    margin-left: clamp(1vh, 10px, 1vw);
    margin-right: clamp(1vh, 10px, 1vw);
    margin-top: clamp(0.5vh, 5px, 0.5vw);
    margin-bottom: clamp(0.5vh, 5px, 0.5vw);

    white-space: nowrap;

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_button_small:hover:enabled {
    scale: 1.05;
    cursor: pointer;
}

.ui_button_small:active:enabled {
    scale: 0.95;
}

.ui_button_small:disabled {
    scale: 0.9;
    opacity: 0.7;
}


/* Text */
.ui_text_header {
    font-family: var(--default-font-family);
    color: var(--default-text-color);
    font-size: clamp(3vh, 30px, 3vw);
    padding: 0px;
    margin: clamp(1vh, 10px, 1vw);
    text-align: center;

    font-weight: 700;
}

.ui_text_header_left {
    font-family: var(--default-font-family);
    color: var(--default-text-color);
    font-size: clamp(3vh, 30px, 3vw);
    padding: 0px;
    margin: clamp(1vh, 10px, 1vw);
    text-align: left;

    font-weight: 700;
}

.ui_text_subheader {
    font-family: var(--default-font-family);
    color: var(--default-text-color);
    font-size: clamp(2.4vh, 24px, 2.4vw);
    padding: 0px;
    margin: 0px;
    text-align: center;

    font-weight: 500;
}

.ui_text_subheader_left {
    font-family: var(--default-font-family);
    color: var(--default-text-color);
    font-size: clamp(2.4vh, 24px, 2.4vw);
    padding: 0px;
    margin: 0px;
    text-align: left;

    font-weight: 500;
}

.ui_text_smallersubheader {
    font-family: var(--default-font-family);
    color: var(--default-text-color);
    font-size: clamp(1.8vh, 18px, 1.8vw);
    padding: 0px;
    margin: 0px;
    text-align: center;

    font-weight: 500;
}

.ui_text_body {
    font-family: var(--default-font-family);
    color: var(--default-text-color);
    font-size: clamp(1.6vh, 16px, 1.6vw);
    padding: 0px;
    margin: 0px;
    text-align: left;
}

.ui_text_description {
    font-family: var(--default-font-family);
    color: var(--default-text-color);
    font-size: clamp(1.2vh, 12px, 1.2vw);
    padding: 0px;
    margin: 0px;
    text-align: left;

    opacity: 0.8;
}


/* Image */
.ui_image_generic {
    border-radius: 10px;
    border: rgba(141, 141, 141, 0.8) 2px solid;
    transition: var(--default-transition);
    backdrop-filter: blur(20px);

    opacity: 0.8;

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_image_generic:hover {
    opacity: 1;
}


/* Status Boxes */
.ui_status_info {
    background-color: rgba(57, 72, 112, 0.5);
    border: rgb(57, 72, 112) 2px solid;
    border-radius: 10px;
    backdrop-filter: blur(20px);

    display: flex;
    flex-direction: row;

    padding: clamp(1vh, 10px, 1vw);
    margin: clamp(1vh, 10px, 1vw);

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_status_warning {
    background-color: rgba(112, 93, 57, 0.5);
    border: rgb(112, 93, 57) 2px solid;
    border-radius: 10px;
    backdrop-filter: blur(20px);

    display: flex;
    flex-direction: row;

    padding: clamp(1vh, 10px, 1vw);
    margin: clamp(1vh, 10px, 1vw);

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_status_critical {
    background-color: rgba(112, 57, 57, 0.5);
    border: rgb(112, 57, 57) 2px solid;
    border-radius: 10px;
    backdrop-filter: blur(20px);

    display: flex;
    flex-direction: row;

    padding: clamp(1vh, 10px, 1vw);
    margin: clamp(1vh, 10px, 1vw);

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_status_text {
    transition: var(--default-transition);
    font-family: var(--default-font-family);
    color: var(--default-text-color);
    font-size: clamp(1.6vh, 16px, 1.6vw);
    padding: 0px;
    margin: 0px;
    text-align: left;

    opacity: 0.8;
    margin-left: clamp(1vh, 10px, 1vw);
}

.ui_status_text:hover {
    opacity: 1;
    scale: 1.05;
}

.ui_status_icon {
    color: white;

    opacity: 0.8;
}


/* Text Areas */
.ui_input_generic {
    background-color: var(--default-glass-background);
    color: var(--default-text-color);
    border-radius: 10px;
    border: var(--default-glass-border);
    transition: var(--default-transition);
    font-size: clamp(1.6vh, 16px, 1.6vw);
    font-family: var(--default-font-family);
    box-sizing: border-box;

    backdrop-filter: var(--default-glass-blur);

    padding: clamp(0.5vh, 5px, 0.5vw);
    margin: clamp(0.5vh, 5px, 0.5vw);

    opacity: 0.8;
    scale: 1;
    outline: none;
    flex-grow: 2;

    width: 100%;

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_input_generic::placeholder {
    color: var(--default-text-color);
}

.ui_input_generic:hover {
    opacity: 1;
    scale: 1.05;
}


/* Spacers */
.ui_spacer {
    height: clamp(2vh, 20px, 2vw);
}


/* Separators */
.ui_separator_vertical {
    width: clamp(0.3vh, 3px, 0.3vw);
    height: 100%;

    margin-top: clamp(1vh, 10px, 1vw);
    margin-bottom: clamp(1vh, 10px, 1vw);

    background-color: var(--default-glass-background);
    border-radius: 10px;
    border: var(--default-glass-border);

    backdrop-filter: var(--default-glass-blur);

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

.ui_separator_horizontal {
    height: clamp(0.3vh, 3px, 0.3vw);
    /* TODO: Technically this works for now but it should be fixed properly later */
    width: 85%; 

    margin-left: clamp(1vh, 10px, 1vw);
    margin-right: clamp(1vh, 10px, 1vw);

    background-color: var(--default-glass-background);
    border-radius: 10px;
    border: var(--default-glass-border);

    backdrop-filter: var(--default-glass-blur);

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
}

/* Background Blur */
.background_blur {
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    z-index: 2;
    background-color: rgba(47, 47, 47, 0.524);
    backdrop-filter: blur(20px);

    display: none; /* Keep hidden until needed */
    transition: var(--default-transition);

    /* Starting properties for animation */
    opacity: 0;
}

.background_blur.show {
    opacity: 1;
}

/* Dialog */
@media (min-width: 1000px) {
    /* Large screens */

    .ui_dialog_generic {
        opacity: 0;
        scale: 0.9;
        transition: var(--default-transition);
        background-color: var(--default-glass-background);
        border: var(--default-glass-border);
        backdrop-filter: var(--default-glass-blur);
        border-radius: 20px;
        padding: clamp(2vh, 20px, 2vw);

        width: max-content;
        overflow-x: hidden;
        max-width: 80vw;
    }
}

@media (max-width: 1000px) {
    /* Small Screens */

    .ui_dialog_generic {
        opacity: 0;
        scale: 0.9;
        transition: var(--default-transition);
        background-color: var(--default-glass-background);
        border: var(--default-glass-border);
        backdrop-filter: var(--default-glass-blur);
        padding: clamp(2vh, 20px, 2vw);
        border-radius: 20px;

        width: 100%;
        overflow-x: hidden;
        height: max-content;
        max-height: 80%;
    }
}

.ui_dialog_generic[open] {
    opacity: 1;
    scale: 1;
}

@starting-style {
    .ui_dialog_generic[open] {
        opacity: 0;
        scale: 0.9;
    }
}

.ui_dialog_generic::backdrop {
    background-color: rgba(47, 47, 47, 0);
    backdrop-filter: blur(0px);
    transition: all 0.7s allow-discrete;
}

.ui_dialog_generic[open]::backdrop {
    background-color: rgba(47, 47, 47, 0.2);
    backdrop-filter: blur(20px);
}

@starting-style {
    .ui_dialog_generic[open]::backdrop {
        background-color: rgba(47, 47, 47, 0);
        backdrop-filter: blur(0px);
    }
}

.ui_dialog_generic_top {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    margin-bottom: clamp(1vh, 10px, 1vw);
    justify-content: space-between;
}

.ui_dialog_generic_top_text {
    margin-right: clamp(2vh, 20px, 2vw);
}

/* Links */
.ui_link_generic {
    color: var(--default-text-color);
    font-family: var(--default-font-family);
    font-size: clamp(1.6vh, 16px, 1.6vw);
    transition: var(--default-transition);

    text-decoration: none;
    opacity: 0.8;

    margin-left: clamp(1vh, 10px, 1vw);
    margin-right: clamp(1vh, 10px, 1vw);
}

.ui_link_generic:hover {
    opacity: 1;
    scale: 1.05;
}

.ui_link_generic:active {
    opacity: 0.9;
    scale: 0.95;
}

.ui_link_generic:visited {
    color: var(--default-text-color);
    text-decoration: none;
}
