@import './colors/grey.css';

:root { color-scheme: light }
:root.dark { color-scheme: dark }

:root {
    font-size: 0.625rem; /* 10px */
    font-family: var(--font-sans);
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    scrollbar-color: light-dark(#B0B0B0, #757575) var(--c-bg-alt);

    & ::selection {
        background-color: var(--c-theme-soft-2);
    }
}
body {
    background-color: var(--c-bg);
    margin: 0;
    padding: 0;
}
button {
    font-family: inherit;

    &:enabled {
        cursor: pointer;
    }
}
p, h1, h2, h3 {
    margin: 0;
}

/*-----------------------------------------------------------------------------------------
---------------------------------------- VARIABLES ----------------------------------------
-----------------------------------------------------------------------------------------*/
:root {
    /*---------- Line height ----------*/
    /* target-line-height >= target-font-size-icon >= target-font-size-text */
    --target-font-size-text: 14;
    --target-font-size-icon: 16;
    --target-line-height: 18;

    /* line-height-text >= font-size-scale-icon >= 1 */
    --font-size-scale-icon: calc(var(--target-font-size-icon) / var(--target-font-size-text));
    --line-height-text: calc(var(--target-line-height) / var(--target-font-size-text));
    --line-height-icon: calc(var(--line-height-text) / var(--font-size-scale-icon));

    /*---------- Font style ----------*/
    --font-sans: 'initial';
    --font-mono: 'initial';

    /*-------- Background --------*/
    --c-bg: light-dark(#FAFAFA, #181818);
    --c-bg-alt: light-dark(#F3F3F3, #121212);
    --c-backdrop: #00000030;

    /*-------- Text --------*/
    --c-text-light: #FFFFFF;
    --c-text-dark: #252525;
    --c-text: light-dark(var(--c-text-dark), var(--c-text-light));

    /*-------- Disabled --------*/
    --c-disabled-1: light-dark(#E5E5E5, #222222);
    --c-disabled-2: light-dark(#D7D7D7, #303030);
    --c-disabled-border-1: light-dark(#CCCCCC, #383838);
    --c-disabled-border-2: light-dark(#ADADAD, #575757);
    --c-disabled-border-3: light-dark(#888888, #6B6B6B);
    --c-disabled-text: light-dark(#5E5E5E, #808080);

    /*-------- Box-Shadow --------*/
    --c-box-shadow: light-dark(#95959550, #00000070);
    
    /*---------- Z-index ----------*/
    --z-index-modal: 10;
    --z-index-popover: 20;
    --z-index-confirm: 30;
    --z-index-toast: 40;

    /*---------- Bezier curves ----------*/
    --bezier-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);
    --bezier-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);
    --bezier-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    --bezier-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    --bezier-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --bezier-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --bezier-bounce-in: cubic-bezier(0.55, -0.45, 0.70, 0.80);
    --bezier-bounce-out: cubic-bezier(0.30, 0.20, 0.45, 1.45);
    --bezier-bounce-in-out: cubic-bezier(0.55, -0.45, 0.45, 1.45);

    /*---------- Border ----------*/
    --component-border-bottom-width: 2.5px;
}

.size-xs { --size: -2 }
.size-sm { --size: -1 }
.size-md { --size: 0 }
.size-lg { --size: 1 }
.size-xl { --size: 2 }
.spacing-compact { --g-spacing: -1; }
.spacing-expanded { --g-spacing: 1; }

:is(.size-xs, .size-sm, .size-md, .size-lg, .size-xl) {
    --font-size: calc(1.4rem + (0.2rem * var(--size)));
    --gap-unit: calc(1px * (1 + (var(--size) * 0.25)) * (1 + (var(--g-spacing, 0) * 0.4)));
    --gap: calc(6 * var(--gap-unit));

    --g-gap-xs: calc(0.5 * var(--gap));
    --g-gap-sm: calc(0.8 * var(--gap));
    --g-gap-md: var(--gap);
    --g-gap-lg: calc(1.2 * var(--gap));
    --g-gap-xl: calc(1.5 * var(--gap));
    --g-gap-2xl: calc(2 * var(--gap));
    --g-gap-3xl: calc(3 * var(--gap));
}

.radius-none { --radius-coeff-a: 0 }
.radius-sm { --radius-coeff-a: 0.75 }
.radius-md { --radius-coeff-a: 1 }
.radius-lg { --radius-coeff-a: 1.5 }
.radius-full {
    --radius-coeff-a: 1.5;
    --g-radius-full: 9999px;
}
:is(.radius-none, .radius-sm, .radius-md, .radius-lg, .radius-full) {
    --radius-coeff-b: calc(1 + (var(--size,0) * 0.2));
    --g-radius-sm: calc(3px * var(--radius-coeff-a) * var(--radius-coeff-b));
    --g-radius-md: calc(4px * var(--radius-coeff-a) * var(--radius-coeff-b));
    --g-radius-lg: calc(6px * var(--radius-coeff-a) * var(--radius-coeff-b));
    --g-radius-xl: calc(8px * var(--radius-coeff-a) * var(--radius-coeff-b));
    --g-radius-2xl: calc(12px * var(--radius-coeff-a) * var(--radius-coeff-b));
}

/*------------------------------------------------------------------------------------------
---------------------------------------- ANIMATIONS ----------------------------------------
------------------------------------------------------------------------------------------*/
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes pulse {
    from { opacity: 0.3; }
    to { opacity: 0.15; }
}
@keyframes move-left {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - 1px)); }
}

/*------------------------------------------------------------------------------------------
---------------------------------------- COMPONENTS ----------------------------------------
------------------------------------------------------------------------------------------*/
/*---------- ModalBackdrop ----------*/
#modal-backdrop { z-index: var(--z-index-modal) }

/*---------- PopoverPortal ----------*/
#popover-portal {
	position: absolute;
	top: 0;
	left: 0;
	z-index: var(--z-index-popover);

	& > .popover-wrapper > .popover {
        position: relative;
        &.popover-enter-active {
            transition: opacity 70ms var(--bezier-sine-out), transform 100ms var(--bezier-sine-out);
        }
        &.popover-leave-active {
            transition: opacity 70ms var(--bezier-sine-in), transform 70ms var(--bezier-sine-in);
        }
        &:is(.popover-enter-from, .popover-leave-to){
            opacity: 0;
            transform: scale(0.95);
        }

        & > .popover-arrow {
            position: absolute;
            & > polygon {
                stroke-width: 0;
            }
            & > polyline {
                fill: none;
                stroke-linecap: square;
            }
        }
	}
}

/*---------- MiniMarkup ----------*/
.inline-block {
    display: inline-block;
    vertical-align: bottom;
}
.inline-icon {
    font-size: 1.2em;
    line-height: 0;
    vertical-align: -0.175em;
}

/*---------- Icon ----------*/
.icon::selection{ background-color: transparent; }