@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback') layer(base);
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap') layer(base);
@import url("https://cdn.jsdelivr.net/npm/lucide-static/font/lucide.css") layer(base);

@import "tailwindcss";
@import "./node_modules/flyonui/variants.css";
@import "./theme.css";

@theme {
    --font-inter: "Inter", var(--font-sans);
    --font-scp: "Source Code Pro", var(--font-mono);
}

@plugin "flyonui" {
    themes: moonlight --default;
}

@source "./node_modules/flyonui/dist/index.js";

@source "../**/*.razor";
@source "../**/*.cs";
@source "../**/*.html";
@source "**/*.map";

@source "../../Moonlight.Client/**/*.cs";
@source "../../Moonlight.Client/**/*.html";
@source "../../Moonlight.Client/**/*.razor";
@source "../../Moonlight.Client/Styles/**/*.map";

@source "../../Moonlight.ApiServer/**/*.razor";

#blazor-error-ui {
    display: none;
}

#blazor-loader-label:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-loader-progress {
    width: var(--blazor-load-percentage, 0%);
}

@layer utilities {
    .btn {
        @apply text-sm font-medium inline-flex items-center justify-center;
    }

    .checkbox {
        @apply border-base-content/30 bg-base-100;
    }

    .input {
        @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-100/50;
    }

    .select {
        @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-100/50;
    }

    .table {
        :where(th, td) {
            @apply py-1.5;
        }
    }

    .dropdown-item {
        @apply px-2.5 py-1.5 text-sm;
    }

    .advance-select-menu {
        @apply !border-base-content/20 border-2 ring-0! outline-0! bg-base-200/50 !pt-0 !px-0 !py-0;
    }

    .advance-select-option {
        @apply !rounded-none hover:!bg-primary;
    }

    .advance-select-option.selected {
        @apply !bg-primary !text-primary-content;
    }

    .advance-select-toggle {
        @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-200/50;
    }

    .table thead {
        @apply !normal-case;
    }
}