.tile {
    --elevation: var(--elevation-lowest);

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

    @apply flex;

    border-radius: var(--radius-small);

    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);

    & > figure {
        & > * {
            @apply h-[var(--sizes-icon-large)] w-[var(--sizes-icon-large)];
        }
    }

    & > footer {
        @apply gap-[var(--spacing-root-small)] justify-end ml-auto;
    }

    & > section {
        @apply flex-col justify-center;

        &:not(:first-child) {
            @apply ml-[var(--spacing-root-large)];
        }

        &:not(:last-child) {
            @apply mr-[var(--spacing-root-large)];
        }

        & > header {
            @apply font-bold leading-[var(--font-content-line-height-large)];

            font-size: var(--font-content-size-large);
        }
    }

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

    & > :is(figure, footer, section) {
        @apply flex;
    }

    &:not([data-variation]) {
        @apply bg-[rgb(var(--palette-background-normal))] border-2 border-solid p-[var(--spacing-root-medium)]
        text-[rgb(var(--palette-foreground-normal))];

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

        box-shadow: var(--elevation);
    }
}