voyager-admin/voyager

@import "@sassmixins/bg-color";
@import "@sassmixins/border-color";
@import "@sassmixins/scrollbar-color";
@import "@sassmixins/text-color";

[v-cloak] {
    display: none;
}

.dark {
    * {
        @include scrollbar-color(scrollbar-bg-color-dark, 'colors.gray.800', scrollbar-handle-color-dark, 'colors.gray.600');

        &::-webkit-scrollbar-track {
            @include bg-color(scrollbar-bg-color-dark, 'colors.gray.800');
        }
        &::-webkit-scrollbar-thumb {
            @include bg-color(scrollbar-handle-color-dark, 'colors.gray.600');
        }
    }
}

* {
    scrollbar-width: thin;
    @include scrollbar-color(scrollbar-bg-color, 'colors.gray.250', scrollbar-handle-color, 'colors.gray.400');

    &::-webkit-scrollbar {
        @apply w-3;
    }
    &::-webkit-scrollbar-track {
        @include bg-color(scrollbar-bg-color, 'colors.gray.250');
    }
    &::-webkit-scrollbar-thumb {
        @include bg-color(scrollbar-handle-color, 'colors.gray.400');
    }
}

html {
    @apply font-sans;
    scroll-behavior: smooth;
}

body {
    @include bg-color(bg-color, 'colors.gray.100');
    @include text-color(text-color, 'colors.gray.700');

    @apply transition-colors duration-50 ease-in-out;
}

::selection {
    @include bg-color(bg-select-color, 'colors.blue.500');
    @include text-color(text-select-color, 'colors.white');
}

.dark body {
    @include bg-color(bg-color-dark, 'colors.gray.900');
    @include text-color(text-color-dark, 'colors.gray.300');
}

.dark a {
    @include text-color(link-color-dark, 'colors.blue.600');
}

a {
    @include text-color(link-color, 'colors.blue.600');
}

h1 {
    @apply text-5xl;
}

h2 {
    @apply text-4xl;
}

h3 {
    @apply text-3xl;
}

h4 {
    @apply text-2xl;
}

h5 {
    @apply text-xl;
}

h6 {
    @apply text-lg;
}

pre {
    @include bg-color(code-bg-color, 'colors.gray.100');
    @include text-color(code-text-color, 'colors.gray.800');
    @apply my-2 p-2 rounded-md;
}

code {
    @include bg-color(code-bg-color, 'colors.gray.100');
    @include text-color(code-text-color, 'colors.gray.800');
    @apply py-0.5 px-1 rounded-md;
}

.dark {
    code, pre {
        @include bg-color(code-bg-color-dark, 'colors.gray.900');
        @include text-color(code-text-color-dark, 'colors.gray.200');
    }
}

ul {
    @apply list-disc list-inside;
}

ol {
    @apply list-decimal list-inside;
}

.dark blockquote {
    @include border-color(blockquote-border-color, 'colors.gray.400');
}

blockquote {
    @apply pl-4 border-l-2;
    @include border-color(blockquote-border-color, 'colors.gray.300');
}