/* Theme Colors */
:root{
    & body {
        color-scheme: light dark;
    }

    & body[data-color-scheme="light"] {
        color-scheme: light;
    }

    & body[data-color-scheme="dark"] {
        color-scheme: dark;
    }
}

body{
    --bg-color: light-dark(#FFFFFF, #0F1012);
    --text-color: light-dark(#2A2D31, #CFCFD2);
    --front-color: light-dark(#F3F5F7, #131517);
    --front-bright-color: light-dark(#F9FAFB, #373B41);
    --border-color: light-dark(#E5E8EA, #1A1C1F);
    --outline-color: light-dark(#D1D5D8, #2A2D31);
    --accent-color: light-dark(#4274c2, #144a9a);
    --info-bg-color: light-dark(#CFF4FC, #032830);
    --info-border-color: light-dark(#9EEAF9, #087990);
    --info-text-color: light-dark(#055160, #6EDFF6);
    --error-color: light-dark(#F8D7DA, #2C0B0E);
    --error-border-color: light-dark(#F1AEB5, #842029);
    --error-text-color: light-dark(#68272F, #EA868F);
    --success-color: light-dark(#D1E7DD, #051B11);
    --success-border-color: light-dark(#A3CFBB, #0F5132);
    --success-text-color: light-dark(#0A3622, #6AA98B);
    --scrollbar-thumb-color: light-dark(#808080, #808080);
}

/* General */
body{
    padding:0;
    margin:0;
    font-family: 'Roboto', sans-serif;
}

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
}

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

/* Form */
input{
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

input:focus{
    outline: 1px solid var(--outline-color);
}

/* Loading */
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 0.75rem 1rem;
    font-size:1.2em;

    & .loader{
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
        border: 3px solid var(--text-color);
        border-bottom-color: transparent;
        margin-right: 10px;
    }
}

body:not(:has(#sidebar.hide)) .navbar-avatar{
    display:none!important;
}

@media screen and (max-width: 768px) {
    #sidebar {
        &.hide {
            display: none!important;
            border-right: 0 !important;
        }
    }
}

@media screen and (min-width: 768px) {
    #sidebar {
        &.hide {
            display: block;
            border-right: 1px solid var(--border-color);
        }
    }
}