:root {
    --prime: #0d6efd;
    --prime_dark: #0a58ca;
    --success: #39b400;
    --success_dark: #2d8f00;
    --error: #e70202;
    --error_dark: #c00000;
    --info: #0dcaf0;
    --info_dark: #0aa3c2;
    --warn: #ffc107;
    --warn_dark: #e0a800;

    --prime_rgb: 13, 110, 253;
    --prime_dark_rgb: 10, 88, 202;
    --success_rgb: 57, 180, 0;
    --success_dark_rgb: 45, 143, 0;
    --error_rgb: 231, 2, 2;
    --error_dark_rgb: 192, 0, 0;
    --info_rgb: 13, 202, 240;
    --info_dark_rgb: 10, 163, 194;
    --warn_rgb: 255, 193, 7;
    --warn_dark_rgb: 224, 168, 0;

    --gray_100: #f8f9fa;
    --gray_200: #e9ecef;
    --gray_300: #dee2e6;
    --gray_400: #ced4da;
    --gray_500: #adb5bd;
    --gray_600: #6c757d;
    --gray_700: #495057;
    --gray_800: #343a40;
    --gray_900: #212529;
    --gray_100_rgb: 248, 249, 250;
    --gray_200_rgb: 233, 236, 239;
    --gray_300_rgb: 222, 226, 230;
    --gray_400_rgb: 206, 212, 218;
    --gray_500_rgb: 173, 181, 189;
    --gray_600_rgb: 108, 117, 125;
    --gray_700_rgb: 73, 80, 87;
    --gray_800_rgb: 52, 58, 64;
    --gray_900_rgb: 33, 37, 41;
}

.card {
    background: var(--card-bg);
    border-radius: 10px !important;
    padding: 20px;
    box-shadow: var(--shadow);
}

.square {
    border-radius: 0px;
}
.circle,
.round {
    border-radius: 100px;
}
.squircle {
    border-radius: 8px;
}

.prime {
    --comp: var(--gray_100_rgb);
    --comp_dark: var(--gray_100_rgb);
    --col: var(--prime_rgb);
    --col_dark: var(--prime_dark_rgb);
}
.success {
    --comp: var(--gray_100_rgb);
    --comp_dark: var(--gray_100_rgb);
    --col: var(--success_rgb);
    --col_dark: var(--success_dark_rgb);
}
.error {
    --comp: var(--gray_100_rgb);
    --comp_dark: var(--gray_100_rgb);
    --col: var(--error_rgb);
    --col_dark: var(--error_dark_rgb);
}
.info {
    --comp: var(--gray_100_rgb);
    --comp_dark: var(--gray_100_rgb);
    --col: var(--info_rgb);
    --col_dark: var(--info_dark_rgb);
}
.warn {
    --comp: var(--gray_900_rgb);
    --comp_dark: var(--gray_100_rgb);
    --col: var(--warn_rgb);
    --col_dark: var(--warn_dark_rgb);
}
.light {
    --comp: var(--gray_900_rgb);
    --comp_dark: var(--gray_900_rgb);
    --col: var(--gray_200_rgb);
    --col_dark: var(--gray_400_rgb);
    color: rgba(var(--comp)) !important;
}
.dark {
    --comp: var(--gray_200_rgb);
    --comp_dark: var(--gray_100_rgb);
    --col: 17,24,39;
    --col_dark: 17,24,39;
}
.solid {
    background: rgba(var(--col));
    color: rgba(var(--comp));
}
.solid:not(.no-hover, :disabled):where(:hover, .active) {
    background: rgba(var(--col_dark));
}
.ghost {
    color: rgba(var(--col));
    background: transparent;
}
.ghost:not(.no-hover, :disabled):where(:hover, .active) {
    color: rgba(var(--col_dark));
}
.thin {
    color: rgba(var(--col));
    background: transparent;
    border: 1px solid;
}
.thin:not(.no-hover, :disabled):where(:hover, .active) {
    color: rgba(var(--comp));
    background: rgba(var(--col));
    border-color: rgba(var(--col));
}
.regular {
    color: rgba(var(--col));
    background: rgba(var(--col), 0.1);
}
.regular:not(.no-hover, :disabled):where(:hover, .active) {
    color: rgba(var(--col_dark));
    background: rgba(var(--col_dark), 0.3);
}
.regular.solid {
    color: rgba(var(--col));
    background: rgba(var(--col), 0.1);
}
.regular.solid:not(.no-hover, :disabled):where(:hover, .active) {
    color: rgba(var(--comp));
    background: rgba(var(--col_dark));
}
.ghost.thin {
    border-color: transparent;
}
.ghost.thin:not(.no-hover, :disabled):where(:hover, .active) {
    background: transparent;
    border-color: rgba(var(--col));
    color: rgba(var(--col));
}
.ghost.regular {
    background: transparent;
}
.ghost.regular:not(.no-hover, :disabled):where(:hover, .active) {
    color: rgba(var(--col_dark));
    background: rgba(var(--col_dark), 0.1);
}
.ghost.regular.reverse {
    background: rgba(var(--col_dark), 0.1);
    color: rgba(var(--col_dark));
}
.ghost.regular.reverse:not(.no-hover, :disabled):where(:hover, .active) {
    background: transparent;
}
.thin.regular {
    background: transparent;
}
.thin.regular:not(.no-hover, :disabled):where(:hover, .active) {
    border-color: rgba(var(--col_dark), 0.1);
    color: rgba(var(--col_dark));
    background: rgba(var(--col_dark), 0.1);
}
.thin.regular.reverse {
    border-color: rgba(var(--col_dark), 0.1);
    color: rgba(var(--col_dark));
    background: rgba(var(--col), 0.1);
}
.thin.regular.reverse:not(.no-hover, :disabled):where(:hover, .active) {
    border-color: rgba(var(--col));
    color: rgba(var(--col));
    background: transparent;
}

/* Themes goes here */
:root {
    background: var(--gray_200);
    color: var(--gray_900);
    --shadow: 0 0 #0000, 0 10px 30px -12px rgb(107 114 128 / 0.2);
    --shadow-left: 0 0 #0000, -10px 0 30px -12px rgb(107 114 128 / 0.2);
    --card-bg: white;
    --card-bg-comp: var(--gray_900);
    --sidebar-divider: var(--gray_600);
    --sidebar-color: var(--gray_600);
}
:root[data-theme="dark"] {
    background: var(--gray_700);
    color: var(--gray_100);
    --shadow: 0 0 #0000, 0 10px 30px -12px rgb(0 0 0 / 0.6),
        0 10px 15px -3px rgb(255 255 255 / 0.05);
    --shadow-left: 0 0 #0000, -10px 0 30px -12px rgb(0 0 0 / 0.6),
        -10px 0 15px -3px rgb(255 255 255 / 0.05);
    --card-bg: var(--gray_900);
    --card-bg-comp: var(--gray_300);
    --sidebar-divider: var(--gray_500);
    --sidebar-color: var(--gray_400);
}
:root[data-theme="dark"] .dark {
    --comp: var(--gray_800_rgb);
    --comp_dark: var(--gray_900_rgb);
    --col: var(--gray_200_rgb);
    --col_dark: var(--gray_400_rgb);
}