:root {
    --color-accent: oklch(62.01% 0.206 259.04);
    --color-primary: oklch(14.94% 0.0 0);
    --color-secondary: oklch(20.44% 0.0 0);
    --color-third: oklch(24.73% 0.0 0);
    --color-contrast: oklch(100.0% 0.0 0);
    --color-font: oklch(100.0% 0.0 0);
    --color-success: oklch(0.594 0.158 148.862);
    --color-danger: oklch(62.8% 0.2577 29.23);
    --color-warning: oklch(0.824 0.15 73.679);
    --color-outline: oklch(39.46% 0.0 0 / 0.3);
    --color-modal: oklch(0 0 0 / 0.4);

    --duration: 250ms;

    --radius: calc(var(--spacing) * 4);
    --radius-md: calc(var(--spacing) * 6);
    --radius-lg: calc(var(--spacing) * 8);
    --radius-x1: calc(var(--spacing) * 12);
    --radius-2x1: calc(var(--spacing) * 16);
    --radius-3x1: calc(var(--spacing) * 24);
    --radius-4x1: calc(var(--spacing) * 32);

    --font-family: Inter;
    --text-sm: calc(var(--spacing) * 12);
    --text-sm--line-height: normal;
    --text-base: calc(var(--spacing) * 14);
    --text-base--line-height: normal;
    --text-lg: calc(var(--spacing) * 16);
    --text-lg--line-height: normal;
    --text-x1: calc(var(--spacing) * 24);
    --font-weight-bold: 700;
    --font-weight-normal: 500;

    --spacing: 0.0625rem; /* 1px */
    --breakpoint-ssm: 25rem;

    /* Radius */
    --radius-b: var(--spacing-4);
    --radius-logo: var(--spacing-50);

    /* Shadows */
    --shadow-xxl: 0 0 var(--spacing-8) var(--color-accent);
    --shadow-lg: 0 0 var(--spacing-4) var(--color-accent);

    /* Fonts */
    --font-type: Inter;
    --font-header: var(--spacing-24);
    --font-large: var(--spacing-16);
    --font-normal: var(--spacing-14);
    --font-small: var(--spacing-12);
    --font-bold: 700;
    --transition-ease: var(--transition-timer) ease-in-out;
    --transition-timer: 0.1s;

    /* Opacity */
    --opacity-min: 0;
    --opacity-low: 0.2;
    --opacity-medium: 0.5;
    --opacity-high: 0.75;
    --opacity-max: 1;

    /* Spacing */
    --spacing-1: 0.063rem; /* 1px */
    --spacing-2: 0.125rem; /* 2px */
    --spacing-3: 0.188rem; /* 3px */
    --spacing-4: 0.25rem; /* 4px */
    --spacing-5: 0.3125rem; /* 5px */
    --spacing-7: 0.438rem; /* 7px */
    --spacing-8: 0.5rem; /* 8px */
    --spacing-10: 0.625rem; /* 10px */
    --spacing-12: 0.75rem; /* 12px */
    --spacing-14: 0.875rem; /* 14px */
    --spacing-15: 0.9375rem; /* 15px */
    --spacing-16: 1rem; /* 16px */
    --spacing-20: 1.25rem; /* 20px */
    --spacing-22: 1.375rem; /* 22px */
    --spacing-24: 1.5rem; /* 24px */
    --spacing-25: 1.563rem; /* 25px */
    --spacing-30: 1.875rem; /* 30px */
    --spacing-32: 2rem; /* 32px */
    --spacing-35: 2.188rem; /* 35px */
    --spacing-40: 2.5rem; /* 40px */
    --spacing-50: 3.125rem; /* 50px */
    --spacing-55: 3.438rem; /* 55px */
    --spacing-60: 3.75rem; /* 60px */
    --spacing-65: 4.063rem; /* 65px */
    --spacing-80: 5rem; /* 80px */
    --spacing-90: 5.625rem; /* 90px */
    --spacing-100: 6.25rem; /* 100px */
    --spacing-110: 6.875rem; /* 110px */
    --spacing-120: 7.5rem; /* 120px */
    --spacing-125: 7.813rem; /* 125px */
    --spacing-130: 8.125rem; /* 130px */
    --spacing-135: 8.438rem; /* 135px */
    --spacing-140: 8.75rem; /* 140px */
    --spacing-150: 9.375rem; /* 150px */
    --spacing-165: 10.313rem; /* 165px */
    --spacing-170: 10.625rem; /* 170px */
    --spacing-175: 10.938rem; /* 175px */
    --spacing-180: 11.25rem; /* 180px */
    --spacing-190: 11.875rem; /* 190px */
    --spacing-200: 12.5rem; /* 200px */
    --spacing-210: 13.125rem; /* 210px */
    --spacing-250: 15.625rem; /* 250px */
    --spacing-270: 16.875rem; /* 270px */
    --spacing-290: 18.125rem; /* 290px */
    --spacing-400: 25rem; /* 400px */
    --spacing-450: 28.125rem; /* 400px */
    --spacing-500: 31.25rem; /* 500px */
    --spacing-740: 46.25rem; /* 740px */
}

/* Global Style */
* {
    box-sizing: border-box;
    font-family: var(--font-type), serif;
}

html {
    display: flex;
    justify-content: center;
}

/* Body Style */
body {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-10);
    width: 1920px;
    height: 100dvh;
    background-color: var(--color-primary);
    color: var(--color-font);
    font-size: var(--font-normal);
    user-select: none;
    margin: 0;
    overflow: auto;
}

/* Link Style */
.tooltip-text > a {
    text-decoration: none;
    color: var(--color-font);
}

/* Buttons, Input, Text, Span */
input, span, button {
    font-size: var(--font-normal);
}

input, button {
    border-width: 0
}

a {
    text-decoration: none;
    color: var(--color-font);
}

/* Remove arrow up/down from input fields */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.disabled {
    filter: opacity(0.5);
    cursor: default;
    pointer-events: none;
}

/* Scrollbar Style */
::-webkit-scrollbar {
    width: var(--spacing-4);
    height: var(--spacing-4);
}

::-webkit-scrollbar-track {
    background-color: var(--color-secondary);
    cursor: grab;
}

::-webkit-scrollbar-track:active {
    background-color: var(--color-secondary);
    cursor: grabbing;
}

::-webkit-scrollbar-corner {
    display: none;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-accent);
    border-radius: var(--radius);
    cursor: grab;
}

::-webkit-scrollbar-thumb:active {
    cursor: grabbing !important;
}

/* Content area (Sidebar + Config) */
.content {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
    padding: var(--spacing-10);
}

.configArea {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-left: var(--spacing-20);
    gap: var(--spacing-20);
    overflow: auto;
}

/* Need to be here otherwise H2 on settings won't works */
.child > .panel-header-tittle-label {
    font-size: var(--font-normal);
    font-weight: var(--font-weight-normal);
    padding-bottom: var(--spacing-5);
    text-transform: uppercase;
    border-bottom: var(--spacing-1) solid var(--color-accent);
    align-items: center;
}

/* License/Settings page */
.no-sidebar {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-10);
    gap: var(--spacing-20);
}

.flex-space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-10);
}

/* Copy Menu */
.copy-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.copy-menu {
    position: fixed;
    padding: var(--spacing-5);
    z-index: 1;
}

.copy-menu-btn {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    background-color: var(--color-secondary);
    padding: var(--spacing-5);
    border: solid var(--spacing-1) var(--color-outline);
    border-radius: var(--radius-b);
}

.copy-btn:hover {
    transform: scale(1.1);
}

/* Ripple FX */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    animation: ripple 0.6s linear;
    opacity: 0.35;
    transform: scale(0);
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.animate-spinner {
    animation: spinner 1s linear infinite;
}

/* Small screens */
@media only screen and (max-width: 1000px) {
    .no-sidebar {
        overflow: auto;
        overflow-x: hidden; /* Remove scroll on Settings */
    }

    .content {
        flex-direction: column;
        overflow: auto;
        padding: 0;
        margin-top: var(--spacing-10);
    }

    .configArea {
        margin-left: 0;
        gap: 0;
        overflow: auto;
    }
}