@variants <md {
    input[type="checkbox"][role="presentation"] {
        & + nav.omni,
        & + .context-backdrop + nav.omni {
            & > header {
                @apply flex-grow z-1;
            }

            & > footer {
                /** TODO: FIX OVERFLOW PUSHING BEYOND TOP BOUNDARY */
                @apply absolute border-l-2 border-b-2 border-solid bottom-0 flex flex-col
                gap-[var(--spacing-local-small)] items-stretch justify-center right-0 overflow-y-auto
                px-[var(--spacing-root-large)] py-[var(--spacing-root-medium)];

                background-color: inherit;
                border-color: rgba(var(--palette-inverse-off-lightest), theme("opacity.10"));
                border-bottom-left-radius: var(--radius-small);

                max-height: min(85vh, 60ex);

                border-color: inherit;

                clip-path: inset(0% 0% 100% 0% round 0% 0% 0% var(--radius-small));
                transform: translateY(100%);

                transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

                & > section {
                    @apply flex-col m-0;
                }
            }
        }

        &:not(:checked) + nav.omni,
        &:not(:checked) + .context-backdrop + nav.omni {
            & > header > .context-button:first-of-type {
                display: initial;
            }
        }

        &:checked + nav.omni,
        &:checked + .context-backdrop + nav.omni {
            &:not([data-variation~="sticky"]) {
                @apply !fixed;
            }

            & > header > .context-button:last-of-type {
                display: initial;
            }

            & > footer {
                clip-path: inset(0% 0% 0% 0% round 0% 0% 0% var(--radius-small));
            }
        }
    }
}

.omni {
    --palette-background-normal: var(--palette-auto-off-normal);
    --palette-foreground-normal: var(--palette-inverse-normal);

    @apply bg-[rgb(var(--palette-background-normal))] flex px-[var(--spacing-root-large)]
    py-[var(--spacing-root-medium)] relative text-[rgb(var(--palette-foreground-normal))] z-1;

    border-color: rgba(var(--palette-inverse-off-lightest), theme("opacity.10"));

    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &[data-variation~="sticky"] {
        @apply sticky top-0 z-1;
    }

    & > footer {
        @apply flex-grow;

        & > section {
            @apply flex gap-[var(--spacing-local-small)] ml-auto;
        }
    }

    & > header {
        @apply font-bold gap-[var(--spacing-local-small)] select-none tracking-widest whitespace-nowrap;

        font-size: var(--font-headline-size-medium);
        line-height: var(--font-headline-line-height-medium);

        & > a {
            @apply inline-flex items-center text-current;
        }

        & > .context-button {
            @apply hidden leading-[initial] tracking-[initial];

            font-size: initial;
        }

        & > hr[data-orientation="vertical"] {
            @apply mx-0;
        }
    }

    & > :is(footer, header) {
        @apply flex items-center;
    }
}

input[type="checkbox"][role="presentation"]:first-child + nav.omni,
input[type="checkbox"][role="presentation"]:first-child + .context-backdrop + nav.omni,
nav.omni:first-child {
    @apply border-b-2 border-solid;
}

input[type="checkbox"][role="presentation"]:last-child + nav.omni,
input[type="checkbox"][role="presentation"]:last-child + .context-backdrop + nav.omni,
nav.omni:last-child {
    @apply border-t-2 border-solid;
}