@layer components {
    .aside {
        @apply w-[240px];
    }

    .main {
        width: calc(theme('width.full') - 240px);
    }

    .calendar-month-height {
        height: calc(theme('height.screen') - 139px);
    }

    .calendar-week-height-sm {
        height: calc(theme('height.screen') - 181px);
    }

    .calendar-week-height-md {
        height: calc(theme('height.screen') - 131px);
    }

    .calendar-week-height {
        height: calc(theme('height.screen') - 90px);
    }

    .form-field {
        @apply max-w-xl;
    }

    .link {
        @apply text-blue-500 hover:text-blue-400 transition-colors ease-in-out duration-200;
    }

    .link-lighter {
        @apply text-blue-300 hover:text-blue-200 transition-colors ease-in-out duration-200;
    }
}

@layer utilities {
    .row-px {
        @apply px-3 sm:px-6 lg:px-8;
    }

    .row-py {
        @apply py-3 sm:py-6 lg:py-8;
    }

    .row-mb {
        @apply mb-3 sm:mb-6 lg:mb-8;
    }

    .row-mt {
        @apply mt-3 sm:mt-6 lg:mb-8;
    }

    .m-container {
        @apply max-w-6xl;
    }

    .s-container {
        @apply max-w-3xl;
    }

    /* Firefox */
    .mixpost-scroll-style {
        scrollbar-width: thin;
        /*scrollbar-color: var(--secondary) var(--primary);*/
    }

    /* Chrome, Edge, and Safari */
    .mixpost-scroll-style::-webkit-scrollbar {
        @apply invisible w-3;
    }

    .mixpost-scroll-style::-webkit-scrollbar-track {
        @apply bg-gray-50 rounded;
    }

    .mixpost-scroll-style::-webkit-scrollbar-thumb {
        @apply bg-gray-300 rounded-md border-4 border-solid border-white transition-colors ease-in-out duration-200;
    }

    .mixpost-scroll-style::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-400;
    }
}