@variants <md {
    input[type="checkbox"][role="presentation"] {
        &:not(:checked) + .offscreen > nav.aside,
        &:not(:checked) + .context-backdrop + .offscreen > nav.aside {
            & > .context-button:nth-last-of-type(2) {
                display: initial;
            }
        }

        &:checked + .offscreen > nav.aside,
        &:checked + .context-backdrop + .offscreen > nav.aside {
            & > .context-button:last-of-type {
                display: initial;
            }
        }
    }
}

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

    @apply bg-[rgb(var(--palette-background-normal))] border-solid flex flex-col 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;
    }

    & > .context-button {
        @apply bottom-3 fixed hidden pointer-events-auto;
    }

    &:not([data-placement]) {
        @apply border-r-2;

        & > .context-button {
            @apply -right-3;

            /** TODO: Fix button support, this transform is clashing with the built-in transform */
            transform: translateX(100%);
        }
    }

    &[data-placement="right"] {
        @apply border-l-2;

        & > .context-button {
            @apply -left-3;

            transform: translateX(-100%);
        }
    }

    & > footer {
        @apply items-center flex gap-[var(--spacing-root-small)] justify-center mt-auto
        pb-[var(--spacing-root-medium)];

        & > a {
            @apply !text-current;
        }
    }

    & > header {
        @apply font-bold leading-[var(--font-headline-line-height-huge)] py-[var(--spacing-root-large)]
        select-none text-center tracking-widest whitespace-nowrap;

        font-size: var(--font-headline-size-huge);

        & > a {
            @apply !text-current;
        }
    }

    & > section {
        @apply overflow-y-auto py-[var(--spacing-root-small)] mb-[var(--spacing-root-medium)];

        &:not(:last-of-type) {
            @apply flex-shrink-0;
        }

        &:last-of-type {
            @apply flex-grow;
        }
    }

    & > :is(footer, header, section) {
        @apply px-[var(--spacing-root-large)];
    }
}