@import '../../../forms/dist/module.esm.css';

@import 'tippy.js/dist/tippy.css';
@import 'tippy.js/themes/light.css';

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

@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
    }

    :root.dark {
        color-scheme: dark;
    }

    [dir='rtl'] select {
        background-position: left 0.5rem center !important;
        padding-left: 2.5rem;
        padding-right: 0.75rem;
    }
}

@layer components {
    .filament-login-page {
        @apply relative bg-no-repeat;
        background-image: radial-gradient(
            circle at top,
            theme('colors.primary.100'),
            theme('colors.white') 50%
        );
    }

    .dark .filament-login-page {
        background-image: radial-gradient(
            circle at top,
            theme('colors.primary.800'),
            theme('colors.gray.800'),
            theme('colors.gray.900') 100%
        );
    }

    .filament-login-page form::before {
        @apply absolute inset-x-0 mx-auto h-px w-2/3 bg-gradient-to-r from-gray-200 via-primary-400 to-gray-200 dark:from-gray-700 dark:via-primary-400 dark:to-gray-700;
        content: '';
        z-index: 1;
        top: -1px;
    }

    .filament-sidebar-header::before {
        @apply pointer-events-none absolute inset-x-0 mx-auto h-px w-full bg-gradient-to-r from-gray-200 via-primary-400 to-gray-200 dark:from-gray-700 dark:via-primary-400 dark:to-gray-700;
        content: '';
        z-index: 1;
        bottom: -1px;
    }
}