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

@layer base {
    * {
        @apply border-slate-600 text-slate-100 placeholder-slate-400;
    }

    body {
        @apply bg-slate-800;
    }

    button {
        @apply py-0.5 px-2 border rounded bg-slate-600 hover:bg-slate-800;
    }
    input {
        @apply border bg-slate-500 rounded px-1;
    }
    textarea {
        @apply border rounded bg-slate-500 w-full;
    }

    table {
        @apply table-auto border-collapse border-slate-500 w-full;
    }
    th {
        @apply border bg-slate-600 px-1;
    }
    td {
        @apply border px-1;
    }

    ::-webkit-scrollbar {
        @apply w-3;
    }
    ::-webkit-scrollbar-track {
        @apply bg-slate-500;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-slate-600 hover:bg-slate-800;
        border-radius: 5px;
    }
    input[type=search] {
        @apply search-cancel:appearance-none search-cancel:w-4 search-cancel:h-4 search-cancel:bg-[url('/svg/search-cancel.svg')];
    }
    .btn-icon {
        @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent;
        > svg {
            @apply w-6 h-6 hover:text-slate-400;
        }
    }
}