.overlay {
    --flex-alignment-x: center;
    --flex-alignment-y: center;

    --spacing-x: 0;
    --spacing-y: 0;

    @apply fixed flex flex-col gap-x-[var(--spacing-x)] gap-y-[var(--spacing-y)] h-screen
    left-0 pointer-events-none top-0 w-screen z-2;

    align-items: var(--flex-alignment-x);
    justify-content: var(--flex-alignment-y);

    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    & > * {
        @apply pointer-events-auto;
    }
}

input[type="checkbox"][role="presentation"] {
    &:not(:checked) + .overlay,
    &:not(:checked) + .context-backdrop + .overlay {
        @apply opacity-0;

        transform: scale(0.3);

        & > * {
            @apply pointer-events-none;
        }
    }

    &:checked + .overlay,
    &:checked + .context-backdrop + .overlay {
        @apply opacity-100;

        transform: scale(1);
    }
}