.mini {
    @apply w-full;

    /* mini controls */
    header{
        @apply flex flex-row items-center justify-between px-2 pb-2;

        > span {
            @apply font-serif text-lg grow;
        }

        > form {
            @apply flex flex-row items-center justify-end gap-1 shrink-0 text-sm;
        }
    }

    /* days wrapper */
    nav {
        @apply border-md border-primary shadow-drop rounded-md;

        /* weekdays */
        hgroup {
             @apply grid grid-cols-7 p-2 pt-3 pb-0;

            span {
                @apply flex items-center justify-center font-semibold;
            }
        }

        /* day grid wrapper */
        form {
            @apply grid grid-cols-7 p-2 pt-1;
        }

        /* day */
        .day {
            @apply text-base p-0 relative flex items-center justify-center h-auto rounded-blob;
            aspect-ratio: 1 / 1;

            &:hover {
                @apply bg-gray-50;
            }

            &.day--current {

            }

            &.day--outside {
                @apply text-gray-500;
            }

            &.day--today {
                @apply bg-cyan-500 font-bold;

                &:hover {
                    @apply bg-cyan-550;
                }
            }

            &.day--with-events {
                &::after {
                    @apply absolute bottom-0 left-1/2 -translate-x-1/2 h-1 rounded-full w-4 bg-magenta-500;
                    content: '';
                }
                &[data-event-count='1']::after {
                    @apply w-1;
                }
                &[data-event-count='2']::after {
                    @apply w-2;
                }
                &[data-event-count='3']::after {
                    @apply w-3;
                }
            }
        }
    }

}
