@import 'tailwindcss';

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --color-primary-300: #639be9;
    --color-primary-400: #5893e7;
    --color-primary-500: #4d8ce6;
    --color-primary-600: #3c81e3;
    --color-secondary: #3f3f3f;
    --color-success-500: #44cf6e;
    --color-success-600: #0cb54f;
    --color-error-400: var(--color-red-400);
    --color-error-500: var(--color-red-500);
    --color-error-600: var(--color-red-600);
    --color-error-700: var(--color-red-700);
    --color-warning-600: var(--color-orange-600);
    --color-info-600: var(--color-blue-600);
    --color-light-base-50: #ffffff;
    --color-light-base-100: #fcfcfc;
    --color-light-base-200: #f6f7f8;
    --color-light-base-300: #ebedf0;
    --color-light-base-400: #e2e5e9;
    --color-light-base-500: #d8d9da;
    --color-light-base-600: #afb5bd;
    --color-light-base-700: #6e767e;
    --color-light-base-800: #6d757d;
    --color-light-base-900: #555e68;
    --color-light-base-950: #222222;
    --color-base-50: #dadada;
    --color-base-100: #bec6cf;
    --color-base-200: #a8afb8;
    --color-base-300: #a5adb5;
    --color-base-400: #536170;
    --color-base-500: #35393e;
    --color-base-600: #34383b;
    --color-base-700: #383c43;
    --color-base-800: #282c34;
    --color-base-900: #1c2127;
    --color-base-950: #181c20;
    --color-scrollbar-primary: #171717;
    --color-scrollbar-secondary: #787878;
}

@layer base {
    * {
        scrollbar-width: thin;
    }

    @media (prefers-color-scheme: dark) {
        /* Firefox */
        * {
            scrollbar-color: var(--color-scrollbar-secondary) var(--color-scrollbar-primary);
        }

        /* Chrome, Edge, and Safari */
        *::-webkit-scrollbar-track {
            background: var(--color-scrollbar-primary);
        }

        *::-webkit-scrollbar-thumb {
            background-color: var(--color-scrollbar-secondary);
        }
    }

    button:not(:disabled),
    [role="button"]:not(:disabled) {
        cursor: pointer;
    }

    #file-content {
        img, object, video, audio {
            @apply rounded;
        }
    }

    .prose {
        h1 {
            font-size: 1.75em !important;
        }

        h2 {
            margin-top: 1em !important;
        }

        h3 {
            font-size: 1.4em !important;
        }

        h4 {
            font-size: 1.3em !important;
        }

        h5 {
            font-size: 1.2em !important;
        }

        h6 {
            font-size: 1.1em !important;
        }

        a {
            color: var(--color-primary-400) !important;
            cursor: pointer;
        }

        a:hover {
            color: var(--color-primary-300) !important;
        }

        @media (prefers-color-scheme: dark) {
            a {
                color: var(--color-primary-500) !important;
            }

            a:hover {
                color: var(--color-primary-600) !important;
            }
        }

        hr {
            margin-top: 2em !important;
            margin-bottom: 2em !important;
        }

        blockquote {
            p {
                &:first-of-type::before,
                &:last-of-type::after {
                    content: none !important;
                }
            }
        }

        ul,
        ol {
            margin: 1.25rem 1rem 1.25rem 0.4rem;

            li {
                margin-top: 0.3em !important;
                margin-bottom: 0.3em !important;
                padding-left: 0 !important;
            }

            li p {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
        }

        ul[data-type="taskList"] {
            margin-left: 0;
            padding-inline-start: 0.70rem !important;

            li {
                display: flex;
                padding-inline-start: 0 !important;

                > label {
                    margin-top: -0.1rem;
                    margin-right: 0.5rem;
                }

                > div > p {
                    margin-top: 0 !important;
                    margin-bottom: 0 !important;
                }

                input[type="checkbox"] {
                    cursor: pointer;
                    border-radius: 4px;
                }
            }

            li[data-checked="true"] {
                p {
                    opacity: 0.7;

                    @media (prefers-color-scheme: dark) {
                        opacity: 0.5;
                    }
                }
            }
        }

        table {
            th {
                font-weight: bold;
            }

            p {
                margin: 0 !important;
            }
        }

        pre {
            background-color: var(--color-light-base-200) !important;
            color: var(--color-light-base-950) !important;

            @media (prefers-color-scheme: dark) {
                background-color: var(--color-base-950) !important;
                color: var(--color-base-50) !important;
            }

            .hljs-doctag,
            .hljs-keyword,
            .hljs-meta .hljs-keyword,
            .hljs-template-tag,
            .hljs-template-variable,
            .hljs-type,
            .hljs-variable.language_ {
                /* prettylights-syntax-keyword */
                color: #d73a49;
            }

            .hljs-title,
            .hljs-title.class_,
            .hljs-title.class_.inherited__,
            .hljs-title.function_ {
                /* prettylights-syntax-entity */
                color: #6f42c1;
            }

            .hljs-attr,
            .hljs-attribute,
            .hljs-literal,
            .hljs-meta,
            .hljs-number,
            .hljs-operator,
            .hljs-variable,
            .hljs-selector-attr,
            .hljs-selector-class,
            .hljs-selector-id {
                /* prettylights-syntax-constant */
                color: #005cc5;
            }

            .hljs-regexp,
            .hljs-string,
            .hljs-meta .hljs-string {
                /* prettylights-syntax-string */
                color: #032f62;
            }

            .hljs-built_in,
            .hljs-symbol {
                /* prettylights-syntax-variable */
                color: #e36209;
            }

            .hljs-comment,
            .hljs-code,
            .hljs-formula {
                /* prettylights-syntax-comment */
                color: #6a737d;
            }

            .hljs-name,
            .hljs-quote,
            .hljs-selector-tag,
            .hljs-selector-pseudo {
                /* prettylights-syntax-entity-tag */
                color: #22863a;
            }

            .hljs-subst {
                /* prettylights-syntax-storage-modifier-import */
                color: #24292e;
            }

            .hljs-section {
                /* prettylights-syntax-markup-heading */
                color: #005cc5;
                font-weight: bold;
            }

            .hljs-bullet {
                /* prettylights-syntax-markup-list */
                color: #735c0f;
            }

            .hljs-emphasis {
                /* prettylights-syntax-markup-italic */
                color: #24292e;
                font-style: italic;
            }

            .hljs-strong {
                /* prettylights-syntax-markup-bold */
                color: #24292e;
                font-weight: bold;
            }

            .hljs-addition {
                /* prettylights-syntax-markup-inserted */
                color: #22863a;
                background-color: #f0fff4;
            }

            .hljs-deletion {
                /* prettylights-syntax-markup-deleted */
                color: #b31d28;
                background-color: #ffeef0;
            }

            @media (prefers-color-scheme: dark) {
                .hljs-doctag,
                .hljs-keyword,
                .hljs-meta .hljs-keyword,
                .hljs-template-tag,
                .hljs-template-variable,
                .hljs-type,
                .hljs-variable.language_ {
                    /* prettylights-syntax-keyword */
                    color: #ff7b72;
                }

                .hljs-title,
                .hljs-title.class_,
                .hljs-title.class_.inherited__,
                .hljs-title.function_ {
                    /* prettylights-syntax-entity */
                    color: #d2a8ff;
                }

                .hljs-attr,
                .hljs-attribute,
                .hljs-literal,
                .hljs-meta,
                .hljs-number,
                .hljs-operator,
                .hljs-variable,
                .hljs-selector-attr,
                .hljs-selector-class,
                .hljs-selector-id {
                    /* prettylights-syntax-constant */
                    color: #79c0ff;
                }

                .hljs-regexp,
                .hljs-string,
                .hljs-meta .hljs-string {
                    /* prettylights-syntax-string */
                    color: #a5d6ff;
                }

                .hljs-built_in,
                .hljs-symbol {
                    /* prettylights-syntax-variable */
                    color: #ffa657;
                }

                .hljs-comment,
                .hljs-code,
                .hljs-formula {
                    /* prettylights-syntax-comment */
                    color: #8b949e;
                }

                .hljs-name,
                .hljs-quote,
                .hljs-selector-tag,
                .hljs-selector-pseudo {
                    /* prettylights-syntax-entity-tag */
                    color: #7ee787;
                }

                .hljs-subst {
                    /* prettylights-syntax-storage-modifier-import */
                    color: #c9d1d9;
                }

                .hljs-section {
                    /* prettylights-syntax-markup-heading */
                    color: #1f6feb;
                    font-weight: bold;
                }

                .hljs-bullet {
                    /* prettylights-syntax-markup-list */
                    color: #f2cc60;
                }

                .hljs-emphasis {
                    /* prettylights-syntax-markup-italic */
                    color: #c9d1d9;
                    font-style: italic;
                }

                .hljs-strong {
                    /* prettylights-syntax-markup-bold */
                    color: #c9d1d9;
                    font-weight: bold;
                }

                .hljs-addition {
                    /* prettylights-syntax-markup-inserted */
                    color: #aff5b4;
                    background-color: #033a16;
                }

                .hljs-deletion {
                    /* prettylights-syntax-markup-deleted */
                    color: #ffdcd7;
                    background-color: #67060c;
                }
            }
        }
    }
}

@utility scrollbar-hidden {
    @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
}
