:root {
    --blue: #0c93df;
    --purple: #a02de6;
    --pink: #c9117f;
    --orange: #e1583a;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter.ttf') format('truetype');
    font-weight: 0 1000;
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 0 1000;
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 0 1000;
    font-style: italic;
}

html {
    font-family: 'Inter', sans-serif;
}
body,
.app {
    @apply h-full w-full min-h-screen bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-200;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%230c93df' fill-opacity='0.04' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.dark body,
#app,
.guide,
.sidebar {
    /*  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='10' height='10' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M10-6V6M10 14v12M26 10H14M6 10H-6'  stroke-linecap='square' stroke-width='0.5' stroke='hsl(280.5,90.4%,50.4%)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-14,-20)' fill='url(%23a)'/></svg>");*/
}

#app {
    @apply h-full w-full;
}

html.dark .shiki-light,
html.dark .vp-code-light {
    display: none;
}

html:not(.dark) .shiki-dark,
html:not(.dark) .vp-code-dark {
    display: none;
}

code[v-pre] {
    display: flex;
    flex-direction: column;
}

.shiki .highlighted {
    background: #7f7f7f20;
    display: block;
    margin: 0 -1rem;
    padding: 0 1rem;
}

.markdown-body h1 + p {
    margin-top: 0;
    opacity: 0.8;
}

.markdown-body a {
    @apply text-vprimary-400 p-1 border border-transparent;
}

.markdown-body a:hover {
    @apply text-vprimary-500 border border-dashed  border-vprimary-500 rounded bg-vprimary-950;
}

.markdown-body a:visited {
    @apply text-purple-500;
}

.markdown-body a:visited:hover {
    @apply text-purple-600 border border-dashed  border-purple-600 rounded bg-purple-950;
}

.markdown-body ul:not(.pagination__btn-list) {
    @apply list-disc list-inside mx-0 opacity-80 px-1;
}

.markdown-body ul:not(.pagination__btn-list) li {
    @apply my-1 mx-0;
}

.markdown-body code {
    @apply text-base;
}

.shiki-dark {
    background: #061637 !important;
}

.docs {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas:
        'header header'
        'sidebar main';
}

.docs__header {
    grid-area: header;
}

.docs__sidebar {
    grid-area: sidebar;
}

.docs__main {
    grid-area: main;
}

p {
    @apply text-base my-2;
}
