@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,700;1,400&display=swap');

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

@layer base {
    .forum {
        font-family: "Source Sans 3", sans-serif;
        font-optical-sizing: auto;
        font-size: 18px;
        @apply text-slate-900;
    }

    .breadcrumbs ol li {
        display: inline-block;
    }

    .breadcrumbs ol li + li {
        margin-left: .5rem;
    }

    .breadcrumbs ol li + li::before {
        float: left;
        padding-right: .5rem;
        color: #6c757d;
        content: "/";
    }

    .forum .clr-field button {
        @apply w-6 h-6 mr-2 rounded-full;
    }

    .forum .nested-sort .ns-targeted {
        @apply rounded-md border-green-500 outline outline-green-500;
    }

    .bg-category {
        background-color: var(--category-light);
    }

    .text-category {
        color: var(--category-light);
    }

    div, p {
        font-size: 1rem;
    }

    h1 {
        @apply text-4xl my-6;
    }

    h2 {
        @apply text-2xl;
    }

    h3 {
        @apply text-xl;
    }

    a:not(.link-button):not(.group-button):not(.text-category) {
        @apply text-slate-600 hover:text-slate-900;
    }

    @media (prefers-color-scheme: dark) {
        .forum {
            @apply text-slate-400;
        }

        .bg-category {
            background-color: var(--category-dark);
        }

        .text-category {
            color: var(--category-dark);
        }

        a:not(.link-button):not(.group-button):not(.text-category) {
            @apply text-slate-300 hover:text-white;
        }
    }
}