@import "tailwindcss";

@theme {
    --color-default: rgb(226, 232, 240);
    --color-default-slate: rgb(100, 116, 139);
    --color-default-slate-dark: rgb(71, 85, 105);
    --color-primary: rgb(66, 165, 245);
    --color-notice: rgb(19, 198, 154);
    --color-warning: rgb(255, 202, 40);
    --color-accept: rgb(121, 134, 203);
    --color-danger: rgb(239, 83, 80);
    --color-table-border: rgb(203, 213, 225);

    --base-font-size: 0.85rem;
    --text-xs: calc(var(--base-font-size) * 0.75);
    --text-xs--line-height: calc(1 / var(--text-xs));
    --text-sm: calc(var(--base-font-size) * 0.875);
    --text-sm--line-height: calc(1.25 / var(--text-sm));
    --text-base: calc(var(--base-font-size) * 1);
    --text-base--line-height: calc(1.5 / var(--text-base));
    --text-lg: calc(var(--base-font-size) * 1.125);
    --text-lg--line-height: calc(1.75 / var(--text-lg));
    --text-xl: calc(var(--base-font-size) * 1.25);
    --text-xl--line-height: calc(1.75 / var(--text-xl));
    --text-2xl: calc(var(--base-font-size) * 1.5);
    --text-2xl--line-height: calc(2 / var(--text-2xl));
    --text-3xl: calc(var(--base-font-size) * 1.875);
    --text-3xl--line-height: calc(2.25 / var(--text-3xl));
    --text-4xl: calc(var(--base-font-size) * 2.25);
    --text-4xl--line-height: calc(2.5 / var(--text-4xl));
    --text-5xl: calc(var(--base-font-size) * 3);
    --text-5xl--line-height: 1;
    --text-6xl: calc(var(--base-font-size) * 3.75);
    --text-6xl--line-height: 1;
    --text-7xl: calc(var(--base-font-size) * 4.5);
    --text-7xl--line-height: 1;
    --text-8xl: calc(var(--base-font-size) * 6);
    --text-8xl--line-height: 1;
    --text-9xl: calc(var(--base-font-size) * 8);
    --text-9xl--line-height: 1;
}

@layer base {
    body {
        @apply text-sm text-default-slate-dark
    }

    hr {
        @apply border-table-border
    }

    a.disabled {
        @apply pointer-events-none cursor-not-allowed opacity-50
    }

    .disabled {
        @apply pointer-events-none cursor-not-allowed opacity-50
    }

    .btn {
        @apply justify-center rounded-md bg-default-slate px-4 py-2 text-sm font-semibold leading-6 text-white
        shadow-xs hover:opacity-80 cursor-pointer
    }

    .card {
        @apply bg-white border border-table-border rounded-xs shadow-xs
    }

    /*Form*/
    .label-style {
        @apply block my-1 font-bold text-default-slate-dark
    }

    .select-style {
        @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs
    }

    .input-style {
        @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs
    }

    .textarea-style {
        @apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-default-slate/50 rounded-xs
    }
}

@layer utilities {
    .header {
        @apply p-4 text-lg font-bold h-16 flex justify-between items-center;
    }

    .side-bar {
        @apply w-64 px-4 text-lg font-bold divide-y divide-default-slate-dark;
    }

    .page-title {
        @apply text-xl font-bold;
    }

    .search-title {
        @apply text-base font-bold;
    }

    .form-title {
        @apply text-center text-3xl font-bold tracking-tight text-default-slate-dark
    }

    .field {
        @apply w-full
    }

    .btn-edit {
        @apply inline-flex items-center rounded-xs px-2.5 py-1.5 text-sm font-semibold hover:opacity-75 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white
    }

    /*Menu*/
    .menu-group {
        @apply flex flex-row py-6 px-4 gap-x-4 justify-between items-center w-full
    }

    .menu-group-icon {
        @apply py-1 text-sm text-default-slate-dark font-medium justify-center
    }

    .menu-group-name {
        @apply p-1 flex-1
    }

    .menu-group-items-title {
        @apply text-base font-bold
    }

    .copyright {
        @apply text-default-slate-dark text-center
    }

    /*Pagy*/
    .pagy {
        @apply flex items-center justify-center space-x-1 font-semibold text-sm text-default-slate;
    }

    .pagy a:not(.gap) {
        @apply block rounded-xs px-2 py-1 border border-default-slate/50;
    }

    .pagy a:not(.gap):hover {
        @apply bg-slate-300
    }

    .pagy a:not(.gap):not([href]) {
        @apply text-default-slate/50 border border-default-slate/25 cursor-default
    }

    .pagy a:not(.gap).current {
        @apply text-white bg-default-slate
    }

    .pagy a.gap {
        @apply inline-block my-auto
    }

    .pagy label {
        @apply inline-block whitespace-nowrap bg-default rounded-xs px-3 py-0.5
    }

    .pagy label input {
        @apply bg-default border-none rounded-xs
    }

    /*Base Table*/
    .base-table {
        @apply min-w-full divide-y divide-table-border whitespace-nowrap border border-table-border
    }

    .base-table th {
        @apply bg-default px-2 py-2 text-left font-semibold text-default-slate-dark lg:table-cell
    }

    .base-table td {
        @apply border-t border-table-border px-2 py-1 text-default-slate lg:table-cell whitespace-nowrap
    }
}

@media (min-width: 640px) {
    .page-title {
        @apply text-3xl font-bold;
    }

    .search-title {
        @apply text-lg font-bold;
    }
}