@import "tailwindcss";

@custom-variant search-cancel (&::-webkit-search-cancel-button);

@utility btn-icon {
    @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent cursor-pointer;
    > svg {
        @apply w-6 h-6;
    }
}
@layer base {
    span, table, input, th, tr, td, button, a.button, div, hr {
        @apply border-slate-600 text-slate-100 placeholder-slate-400;
    }

    body {
        @apply bg-slate-800;
    }

    button, a.button {
        @apply py-0.5 px-2 border rounded bg-slate-600 hover:bg-slate-700;
    }
    input, select {
        @apply border bg-slate-500 rounded px-1;
    }
    option {
        @apply bg-slate-500;
    }
    textarea {
        @apply border rounded bg-slate-500 w-full;
    }

    table, .table {
        @apply table-auto border-collapse border-slate-500 w-full;
    }
    .table-header {
        @apply table-cell;
    }
    .table-cell {
        @apply pt-px pb-px;
    }
    th, .table-header {
        @apply border bg-slate-600 px-1;
    }
    td, .table-cell {
        @apply border px-1;
    }
    tr, .table-row {
        @apply hover:bg-slate-900;

        &.line-red {
            @apply bg-amber-900 hover:bg-amber-950;
        }
        &.line-blue {
            @apply bg-sky-600 hover:bg-sky-800;
        }
        &.line-green {
            @apply bg-emerald-500 hover:bg-emerald-600;
        }
    }
    tfoot>tr>td {
        @apply font-semibold;
    }


    ::-webkit-scrollbar {
        @apply w-3;
    }
    ::-webkit-scrollbar-track {
        @apply bg-slate-500 rounded;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-slate-600 hover:bg-slate-700;
        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 btn-icon;
    }

    a.tab {
        @apply flex items-center px-4 me-2 rounded-t-md bg-slate-600 hover:bg-slate-700;

        &.router-link-active {
            @apply bg-emerald-500 hover:bg-emerald-700;
        }
    }
}