@import '@radix-ui/themes/styles.css';
@import '@angular/cdk/overlay-prebuilt.css';
@import '@docsearch/css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;
        --primary: 240 5.9% 10%;
        --primary-foreground: 0 0% 98%;
        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;
        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;
        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 100%;
        --border: 240 5.9% 90%;
        --input: 240 4.9% 83.9%;
        --ring: 240 5% 64.9%;
        --radius: 0.5rem;

        /*--bg-primitive-demo: hsl(297.48deg 89.65% 24.12%);*/
        --bg-primitive-demo: hsl(297.48deg 23.42% 15.97%);

        /** --------------- Algolia DocSearch variables ---------------- */
        --docsearch-primary-color: #5468ff;
        --docsearch-text-color: #1c1e21;
        --docsearch-spacing: 12px;
        --docsearch-icon-stroke-width: 1.4;
        --docsearch-highlight-color: var(--docsearch-primary-color);
        --docsearch-muted-color: #969faf;
        --docsearch-container-background: rgba(101, 108, 133, 0.8);
        --docsearch-logo-color: #5468ff;
        --docsearch-modal-width: 560px;
        --docsearch-modal-height: 600px;
        --docsearch-modal-background: #f5f6f7;
        --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64;
        --docsearch-searchbox-height: 56px;
        --docsearch-searchbox-background: #ebedf0;
        --docsearch-searchbox-focus-background: #fff;
        --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
        --docsearch-hit-height: 56px;
        --docsearch-hit-color: #444950;
        --docsearch-hit-active-color: #fff;
        --docsearch-hit-background: #fff;
        --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
        --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
        --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
        --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
            0 1px 1px 0 rgba(30, 35, 90, 0.4);
        --docsearch-footer-height: 44px;
        --docsearch-footer-background: #fff;
        --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
    }

    .dark {
        --background: 141 17% 5%;
        --foreground: 0 0% 98%;
        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 240 10% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 240 5.9% 10%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 5.9% 10%;
        --muted-foreground: 240 4.4% 58%;
        --accent: 240 5.9% 10%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 100%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 240 3.8% 46.1%;

        --bg-primitive-demo: hsl(297.48deg 23.42% 15.97%);

        /** --------------- Algolia DocSearch variables ---------------- */
        --docsearch-text-color: #f5f6f7;
        --docsearch-container-background: rgba(9, 10, 17, 0.8);
        --docsearch-modal-background: #15172a;
        --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
        --docsearch-searchbox-background: #090a11;
        --docsearch-searchbox-focus-background: #000;
        --docsearch-hit-color: #bec3c9;
        --docsearch-hit-shadow: none;
        --docsearch-hit-background: #090a11;
        --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
        --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3);
        --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
            0 1px 1px 0 rgba(3, 4, 9, 0.30196078431372547);
        --docsearch-footer-background: #1e2136;
        --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
        --docsearch-logo-color: #fff;
        --docsearch-muted-color: #7f8497;
    }

    * {
        @apply border-border;
    }
}

.radix-themes-custom-fonts .radix-themes:not(.radix-themes-default-fonts),
.radix-themes.radix-themes-custom-fonts {
    --default-font-family: 'Untitled Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji';
    --code-font-family: 'Söhne Mono', 'Menlo', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
}

@layer all {
    html {
        overflow-y: scroll;
        word-break: break-word;
    }

    body {
        margin: 0;
        min-width: 320px;
        -webkit-text-size-adjust: 100%;

        font-synthesis: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        /* Provide a default family for portalled elements not using themes (e.g. Primitives examples) */
        font-family: var(--default-font-family), serif;

        font-variation-settings: normal;
        text-rendering: optimizeLegibility;
    }
}

::selection {
    background: hsl(var(--primary) / 0.3);
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar:horizontal {
    height: 15px;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:horizontal {
    border-radius: 9999px;
    border: 4px solid transparent;
    background-clip: content-box;
    @apply bg-accent;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-corner:horizontal {
    @apply bg-transparent;
}

.expressive-code {
    max-width: calc(100vw - 3.5rem);
}

#Code {
    .expressive-code pre {
        border-top-left-radius: 1px;
        border-top-right-radius: 1px;
    }
}

#CodeTheme {
    .expressive-code pre {
        border-top: none;
        border-top-left-radius: 1px;
        border-top-right-radius: 1px;
    }
}

.expressive-code pre {
    border-color: hsl(var(--muted)) !important;
}

.expressive-code .frame pre {
    background: var(--accent-2) !important;
}

.MDX_List,
.marked-list {
    display: flex;
    flex-direction: column;
    list-style-type: circle;
    gap: var(--space-1);
    padding-left: var(--space-4);
    margin-bottom: calc(var(--space-4) + var(--space-1));
}

.marked-list {
    padding-left: 0;
    gap: var(--space-2);
}

.marked-list__item {
    padding-left: calc(var(--space-3) + 24px);
    position: relative;
    list-style: none;
}

.marked-list__item::before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 24px;
    height: 24px;
    background-color: var(--green-4);
    border-radius: 50%;
}

.marked-list__item::after {
    position: absolute;
    top: 7px;
    left: 7px;
    content: '';
    color: var(--green-11);
    width: 10px;
    height: 6px;
    border-bottom: 1px solid;
    border-left: 1px solid;
    transform: rotate(-34deg) skewY(-24deg);
}

.custom-justify-center:before,
.custom-justify-center:after {
    content: '';
    flex: 1;
}

@media screen and (max-width: 930px) {
    .rt-TableCell,
    .rt-TableRow,
    .rt-TableCell span {
        white-space: wrap;
        overflow-wrap: anywhere;
    }
}

@media screen and (max-width: 840px) {
    .rt-TableRow,
    .rt-TableBody {
        display: block;
    }

    .rt-TableCell {
        display: flex;
        height: auto;
        box-shadow: none;
    }

    .rt-TableHeader {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .rt-TableRootTable .rt-TableBody th.rt-TableCell {
        background-color: var(--gray-a2);
    }

    .rt-TableCell:before {
        display: block;
        flex-shrink: 0;
        width: 30%;
        margin-right: 4px;
        content: attr(data-label);
        font-weight: bold;
    }
}

.bg-primitive-demo {
    background: linear-gradient(120deg, var(--indigo-6), var(--crimson-5));
}

.SliderRoot {
    position: relative;
    display: flex;
    align-items: center;
    user-select: none;
    touch-action: none;
    width: 200px;
    height: 20px;
}
