@import "tailwindcss";

@theme inline {
    --breakpoint-xs: 350px;

    --color-background-light: #ffffff;
    --color-foreground-light: #171717;
    --color-background-dark: #0a0a0a;
    --color-foreground-dark: #ededed;

    --color-dark: #000000;

    --color-primary: #000000;
    --color-primary-hover: #29292b;
    --color-primary-outline: #29292b;
    --color-primary-text: #29292b;
    --color-primary-dark: #29292b;
    --color-primary-dark-hover: #4b4b4b;
    --color-primary-dark-outline: #4b4b4b;
    --color-primary-dark-text: #ffffff;

    --color-secondary: #000000;
    --color-secondary-hover: #dddddd;
    --color-secondary-outline: #dddddd;
    --color-secondary-text: #dddddd;
    --color-secondary-dark: #000000;
    --color-secondary-dark-hover: #dddddd;
    --color-secondary-dark-outline: #dddddd;
    --color-secondary-dark-text: #dddddd;

    --color-accent: #000000;
    --color-accent-hover: #dddddd;
    --color-accent-outline: #dddddd;
    --color-accent-text: #dddddd;
    --color-accent-dark: #000000;
    --color-accent-dark-hover: #dddddd;
    --color-accent-dark-outline: #dddddd;
    --color-accent-dark-text: #dddddd;

    --color-gray: #dfe6ef;
    --color-gray-hover: #dfe6ef;
    --color-gray-dark: #1d2b3f;
    --color-gray-dark-hover: #132033;

    --color-success: #0aa156;
    --color-success-dark: #0aa156;

    --color-error: #e5484d;
    --color-error-dark: #e5484d;

    --color-warning: #ff6900;

    --color-link: #0051c9;
    --color-link-dark: #548adb;

    --radius-default: 5px;
    --radius-default-sm: 3px;
    --radius-default-xs: 1px;
    --radius-default-lg: 7px;
    --radius-default-xl: 10px;
}

@custom-variant dark (&:where(.dark, .dark *));

body {
    @apply bg-background-light dark:bg-background-dark;
    @apply text-foreground-light dark:text-foreground-dark;
    font-family: Arial, Helvetica, sans-serif;
}

.tox-tinymce {
    @apply w-full !rounded-default !border-slate-300 dark:!border-white/20;
}

/* .moving-object {
    @apply !bg-green-500;
} */

option {
    @apply dark:bg-background-dark;
}

.mobile-paper-hidden {
    @apply max-md:p-0 max-md:border-none max-md:bg-transparent;
}

::-webkit-scrollbar {
    @apply w-2;
}

::-webkit-scrollbar-track {
    @apply bg-gray rounded-full dark:bg-gray;
}

::-webkit-scrollbar-thumb {
    @apply bg-foreground-light/40 rounded-full hover:bg-foreground-light/60;
    @apply dark:bg-foreground-dark/40 rounded-full hover:bg-foreground-dark/60;
}

* {
    scrollbar-width: thin;
    scrollbar-color: theme("colors.gray.400") theme("colors.gray.100");
}

@supports (selector(:where(*))) {
    :where(*) {
        scrollbar-width: thin;
        scrollbar-color: theme("colors.gray.400") theme("colors.gray.100");
    }

    .dark :where(*) {
        scrollbar-color: theme("colors.gray.500") theme("colors.gray.800");
    }
}

.ace_editor {
    @apply dark:bg-background-dark;
}

.tox-editor-header,
.tox-toolbar-overlord,
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary,
.tox .tox-tbtn,
.tox .tox-sidebar,
.tox .tox-statusbar,
.tox .tox-view-wrap,
.tox .tox-view-wrap__slot-container,
.tox .tox-editor-container,
.tox .tox-edit-area__iframe,
.twui-tinymce {
    @apply dark:!bg-background-dark;
}

.twui-tinymce *:focus {
    @apply !outline-white/10;
}

.tox .tox-tbtn:hover {
    @apply dark:!bg-white/10;
}

.ace_gutter {
    @apply dark:!bg-background-dark;
}

.ace_active-line,
.ace_gutter-active-line {
    @apply dark:!bg-white/5;
}

.normal-text {
    @apply text-foreground-light dark:text-foreground-dark;
}