@layer components {
    /* Styles for the Info Panel */
    .infopanel {
        @apply max-w-sm md:max-w-lg lg:max-w-none my-2 mx-4 rounded bg-white border border-gray-500 absolute right-0;
        z-index: 1;
    }

    .infopanel .infopanel-head {
        @apply m-2 grid grid-cols-2 font-bold text-2xl text-black;
    }
    .infopanel .infopanel-head .infopanel-closer--container {
        @apply text-right;
    }
    .infopanel .infopanel-head .infopanel-closer {
        @apply cursor-pointer
    }
    .infopanel .infopanel-body {
        @apply my-2 mx-4;
    }
    .infopanel .infopanel-body div,
    .infopanel .infopanel-body p{
        @apply py-2;
    }

    .infopanel.closed .infopanel-body {
        @apply hidden;
    }
    .infopanel.closed .infopanel-head {
        @apply block;
    }
    .infopanel.closed .infopanel-head .infopanel-title {
        @apply hidden;
    }

    .spoiler {
        @apply p-4 bg-black hover:bg-gray-200 transition-colors duration-700 rounded-lg;
    }
    .spoiler:not(:hover) * {
        background-color: inherit;
    }
    .spoiler a {
        @apply text-black;
    }

    /* Styles for modals */
    .modal-overlay {
        @apply absolute bg-black bg-opacity-60 bottom-0 left-0 right-0 top-0 z-20;
    }

    .modal {
        @apply w-10/12 md:max-w-lg lg:max-w-3xl p-4 bg-white rounded absolute left-1/2 top-10 transform -translate-x-1/2;
    }

    .modal .modal-header {
        @apply flex justify-between mb-2 pb-2 border-b-2 border-gray-400;
    }

    .modal .modal-header .modal-title,
    .modal .modal-header .modal-closer {
        @apply inline-block font-bold text-xl;
    }
    
    .modal .modal-header .modal-title {
        @apply font-bold text-xl;
    }
    .modal .modal-header .modal-closer {
        @apply cursor-pointer text-right;
    }

    .modal-body {
        @apply overflow-y-auto;
        max-height: 60vh;
    }
}