.calendar {
    @apply grid col-span-3 pr-6 2xl:pr-8 pb-6 2xl:pb-8 pt-2;
    grid-template-rows: 2rem 1fr;

    hgroup {
        @apply grid grid-cols-7 w-full gap-1;

        > span {
            @apply uppercase text-right pr-4 font-bold;
        }
    }

    ol {
        @apply grid grid-cols-7 w-full gap-1;
        contain: paint;
        grid-auto-rows: 1fr;

        li {
            @apply relative px-1 pt-8 border-t-md border-primary;

            &::before {
                @apply absolute top-0 right-px w-auto h-8 flex items-center justify-end pr-4 text-sm font-medium;
                content: attr(data-day-number);
            }

            &.day--outside {
                @apply bg-gray-50 text-gray-700;
            }

            &.day--today {
                @apply bg-cyan-100;
            }

            &:nth-child(-n+7) {
                @apply border-t-2;
            }

            &:last-child {
                @apply rounded-br-lg;
            }

            .event {
                @apply flex items-center text-xs gap-1 px-1 py-px font-medium truncate rounded-sm bg-transparent;
                transition: background-color 125ms ease-in-out;

                .indicator {
                    --indicator-bg: var(--event-color);
                }

                .title {
                    @apply grow;
                }

                time {
                    @apply text-2xs;
                }

                &:hover {
                    background-color: color-mix(in srgb, var(--event-color) 25%, #fff 100%);
                }
            }
        }
    }
}