@layer components {

    /* Footer */
    footer {
        position: relative;
        bottom: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        overflow: hidden;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 5.375rem;
        margin-top: var(--space-32);
        padding: var(--space-16);
        background-color: var(--color-bg-surface-alt);
    }

    .footer-copyright {
        font-weight: var(--font-weight-bold);
        text-align: center;
    }

    .footer-version {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-2) var(--space-8);
        border: var(--border-width-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-corner);
        background-color: var(--color-bg-surface);
        color: var(--color-text-muted);
        font-size: var(--font-size-meta);
        font-weight: var(--font-weight-semibold);
        line-height: 1.2;
    }
}