/*############*/
/*## COLORS ##*/
/*############*/

:root {
    --clr-blue-100: #091931;
    --clr-blue-200: #2A3647;
    --clr-blue-300: #2A3D59;
    --clr-blue-400: #0038FF;
    --clr-blue-500: #4589FF;
    --clr-blue-600: #29ABE2;

    --clr-gray-400: #A8A8A8;
    --clr-gray-500: #D1D1D1;
    --clr-gray-600: #F4F4F4;

    --clr-bg-main: var(--clr-gray-600);
    --clr-turquoise: var(--clr-blue-600);
    --clr-menu-bg: var(--clr-blue-200);
    --clr-menu-selected: var(--clr-blue-100);
    --clr-menu-hover: var(--clr-blue-100);
    --clr-legal-links: var(--clr-gray-400);
    --clr-legal-links-hover: var(--clr-turquoise);
    --clr-button-prim-bg: var(--clr-blue-200);
    --clr-button-prim-hover: var(--clr-turquoise);
    --clr-button-prim-active: var(--clr-blue-100);
    --clr-input-invalid: red;
}

.bg-clr-main {
    background-color: var(--clr-bg-main);
}

/*#####################*/
/*## MISC PROPERTIES ##*/
/*#####################*/

:root {
    --border-radius-circular: 10000px;
    /* --border-radius-default: 1em; */
    --transition-default: all 125ms ease;
    --shadow-button: 0px 4px 4px 0px #00000040;
    --shadow-top-inset: inset 0px 6px 5px -6px #888;
}

/*################*/
/*## TYPOGRAPHY ##*/
/*################*/

body {
    font-family: 'Inter', sans-serif;
}

/*#####################*/
/*## UTILITY CLASSES ##*/
/*#####################*/

.d-none {
    display: none !important; 
}

.v-hidden {
    visibility: hidden;
}

.h-pointer:hover {
    cursor: pointer;
}

.flex-row {
    display: flex;
    align-items: center;
    gap: 1em;
}

/*##################*/
/*## PERSON ICONS ##*/
/*##################*/

.person-icon {
    border-radius: var(--border-radius-circular);
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.person-icon img {
    height: 1em;
}

/*#############*/
/*## BUTTONS ##*/
/*#############*/

.button {
    padding: 1em 1.5em;
    border-radius: 0.5em;
    transition: var(--transition-default);
    font-size: var(--fs-400);
}

.button:hover {
    box-shadow: var(--shadow-button);
    transform: translate(-2px, -2px);
    cursor: pointer;
}

.button:active {
    box-shadow: var(--shadow-button);
    transform: translate(-1px, -1px);
    transition: none;
}

.button:disabled {
    transform: unset;
    filter: grayscale(50%) opacity(50%); 
}

.button:hover:disabled {
    box-shadow: none;
    transform: none;
    cursor: unset;
}

/* button with icon */
.button-wIcon {
    padding: 0.75em 1em;
    border-radius: 0.625em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6em;
    transition: var(--transition-default);
}

.button-wIcon img {
    height: 1.3em;
}


.button-wIcon .icon-hover {
    display: none;
}

.button-wIcon:hover img:not(:last-child) {
    display: none;
}

.button-wIcon:hover .icon-hover {
    display: unset;
}

.button-wIcon:hover {
    box-shadow: var(--shadow-button);
    transform: translate(-2px, -2px);
    cursor: pointer;
}

.button-wIcon:active {
    box-shadow: var(--shadow-button);
    transform: translate(-1px, -1px);
    transition: none;
}

.button-wIcon:disabled {
    transform: unset;
    filter: grayscale(50%) opacity(50%);
}

/*button primary*/
.button-prim {
    background-color: var(--clr-button-prim-bg);
    color: white;
}

.button-prim:hover {
    background-color: var(--clr-button-prim-hover);
    color: white;
}

.button-prim:active {
    background-color: var(--clr-button-prim-active);
    color: white;
    transition: none;
}

.button-prim:hover:disabled {
    background-color: var(--clr-button-prim-bg);
}

/* button secondary */
.button-sec {
    color: var(--clr-blue-200);
    outline: 1px solid var(--clr-blue-200);
}

.button-sec:hover {
    color: var(--clr-blue-600);
    outline: 2px solid var(--clr-blue-600);
}

.button-sec:active {
    color: var(--clr-blue-100);
    outline: 2px solid var(--clr-blue-100);
}

/*################*/
/*## TEXTINPUTS ##*/
/*################*/

.input-elem-wrapper {
    position: relative;
}

.textinput {
    width: 100%;
    border: 1px solid var(--clr-gray-500);
    border-radius: var(--border-radius-default);
    font-size: var(--fs-400);
    padding: 0.75em 1.3em;
}

.textinput::placeholder {
    color: var(--clr-gray-500);
}

.input-icon-wrapper {
    height: 100%;
    position: absolute;
    right: 1.3em;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-icon {
    height: 1.5em;
}

.validate-input:invalid {
    border: 1px solid red;
}

.validation-message {
    font-size: var(--fs-300);
    color: red;
}

/*#################*/
/*## TOASTS JOIN ##*/
/*#################*/

.toast {
    background-color: var(--clr-menu-bg);
    padding: 1em 1em;
    border-radius: 1em;
}


/*###########*/
/*## DEBUG ##*/
/*###########*/