@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(130, 144, 158);

    /* theme */
    --color-logo-color: rgb(21, 128, 120);
    --color-base-background: rgb(39, 44, 56);
    --color-base-secondary: rgb(55, 61, 71);
    --color-base-text: rgb(255, 255, 255);
    --color-base-border: rgb(77, 84, 102);

    --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 bg-base-background text-base-text font-['Pretendard-Regular']
    }

    hr {
        @apply border-table-border
    }

    .background-pattern {
        background-image: repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.01) 0,
            rgba(255, 255, 255, 0.01) 24px,
            transparent 1px,
            transparent 36px
        );
    }

    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 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 px-2 py-1.5 border border-default-slate/50 rounded-xs text-base-background appearance-none
    }

    .select-style option {
        color: theme('colors.base-background');
    }

    .input-style {
        @apply block w-full px-2 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
    }

    /*Toggle Button*/
    .toggle_style {
        @apply w-14 h-8 bg-danger rounded-full peer-checked:bg-notice transition-all duration-300
    }

    .toggle_btn {
        @apply absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-all duration-300 peer-checked:translate-x-full shadow-sm
    }
}

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

    .side-bar {
        /*@apply w-[16rem] pl-4 text-lg font-bold divide-y divide-base-border;*/
        @apply w-[16rem] pl-4 pr-4 lg:pr-0 text-lg font-bold;
    }

    .content {
        @apply lg:rounded-lg bg-base-secondary;
    }

    .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-2 px-4 my-4 gap-x-4 justify-between items-center w-full
    }

    .menu-group-active {
        @apply bg-base-secondary text-white rounded-md;
    }

    .menu-group:hover {
        @apply bg-base-secondary text-white transition-colors rounded-md;
    }

    .menu-group-icon {
        @apply py-1 text-sm 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
    }

    /*Dashboard*/
    .dashboard-group {
        @apply rounded-md bg-base-background h-32 p-4 flex flex-col justify-between cursor-pointer
    }

    /*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 whitespace-nowrap border border-table-border
    }

    .base-table th {
        @apply bg-base-background px-2 py-2 text-left font-bold lg:table-cell
    }

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

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

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

/* 기본 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    padding: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(21, 21, 21, 0.4);
    border-radius: 4px;
    transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.6);
}

.input-style::-webkit-outer-spin-button,
.input-style::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-style[type="number"] {
    -moz-appearance: textfield;
}

/*Fonts*/
@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}