.appFooter {
    --app-footer-social-size: calc(var(--footer) - 12px);
    position: relative;
    overflow: hidden;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    height: var(--footer);
    min-height: var(--footer);
    display: flex;
    align-items: center;
    padding: 0 var(--pad-1);
    background: var(--c-surface-glass);
    border-top: var(--border-2) solid var(--c-border);
}

.appFooter__content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-1);
}

.appFooter__socials {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

.appFooter__status {
    grid-column: 2;
    grid-row: 1;
}

.appFooter__links {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.appFooter__socials,
.appFooter__links {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
}

.appFooter__versionGroup {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    flex: 0 0 auto;
}

.appFooter__socials {
    justify-content: flex-start;
}

.appFooter__links {
    justify-content: flex-end;
}

.appFooter__status {
    display: grid;
    place-items: center;
    min-width: 0;
}

.appFooter__loadingLabel {
    display: block;
    font: var(--font-textblock);
    max-width: min(100%, 32ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
}

.appFooter__socialLink,
.appFooter__textLink,
.appFooter__version,
.appFooter__copyright {
    color: var(--c-font-muted);
}

.appFooter__socialLink,
.appFooter__textLink {
    transition: color var(--ease-fast);
}

.appFooter__socialLink:hover,
.appFooter__socialLink:focus-visible,
.appFooter__textLink:hover,
.appFooter__textLink:focus-visible {
    color: var(--c-accent);
}

.appFooter__socialLink {
    width: var(--app-footer-social-size);
    height: var(--app-footer-social-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.appFooter__socialIcon {
    width: 100%;
    height: 100%;
    background: currentColor;
    mask: var(--footer-social-icon) center / contain no-repeat;
    -webkit-mask: var(--footer-social-icon) center / contain no-repeat;
}

.appFooter__socialLink--globe {
    --footer-social-icon: url("../../../public/assets/icons/socials/globe.svg");
}

.appFooter__socialLink--instagram {
    --footer-social-icon: url("../../../public/assets/icons/socials/instagram.svg");
}

.appFooter__socialLink--tiktok {
    --footer-social-icon: url("../../../public/assets/icons/socials/tiktok.svg");
}

.appFooter__socialLink--youtube {
    --footer-social-icon: url("../../../public/assets/icons/socials/youtube.svg");
}

.appFooter__textLink {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: var(--font-button);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.appFooter__textLink.is-unfinished::after {
    content: "*";
    margin-left: 3px;
    color: var(--c-console-level-error);
    font-size: 1.45em;
    font-weight: 700;
    line-height: 0;
    text-shadow: 0 0 6px color-mix(in srgb, var(--c-console-level-error) 82%, transparent);
}

.appFooter__version {
    font: var(--font-button);
    font-family: var(--font-numeric);
    white-space: nowrap;
}

.appFooter__copyright {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font: var(--font-button);
    white-space: nowrap;
}

.appFooter__separator {
    width: 0;
    height: 12px;
    border-left: var(--border-1) solid var(--c-border);
}

@media (prefers-reduced-motion: reduce) {
    .appFooter__socialLink,
    .appFooter__textLink {
        transition-duration: 0ms;
    }
}

@media (max-width: 640px) {
    .appFooter {
        --app-footer-social-size: calc(var(--btn-slim-h) - 8px);
    }

    .appFooter__content {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    }

    .appFooter__socials {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .appFooter__links {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .appFooter__socials,
    .appFooter__links {
        gap: var(--gap-1);
    }

    .appFooter__status {
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
        min-width: 0;
    }

    .appFooter__version,
    .appFooter__version + .appFooter__separator,
    .appFooter__textLink[data-role="contact-footer-button"] {
        display: none;
    }

    .appFooter:has(.appFooter__loadingLabel:not([hidden])) .appFooter__socials,
    .appFooter:has(.appFooter__loadingLabel:not([hidden])) .appFooter__links {
        display: none;
    }

    .appFooter:has(.appFooter__loadingLabel:not([hidden])) .appFooter__status {
        grid-row: 1 / -1;
        width: 100%;
    }
}