footer.sass

footer#document-footer
    background: $footer-background-color
    color: $footer-color
    padding-bottom: $spacing3
    padding-top: $spacing3
    position: relative
    @include media-breakpoint-down(desktop)
        z-index: $zindex-footer
    a
        @include link($footer-color)
    .logo
        img
            height: $footer-logo-height
            max-width: 100%
            width: auto
            @include media-breakpoint-up(desktop)
                height: $footer-logo-height-desktop
    ul
        @include list-reset
        li
            + li
                margin-top: $spacing0
            a
                @include link($footer-color)
                text-decoration-color: transparent
    .footer
        &-site
            @include small
        &-social, &-legals, &-credit
            @include meta
        &-credit
            display: block
            margin-top: $spacing0
        @if $footer-icons-enabled
            &-social 
                .nav-social + .site-links
                    margin-top: $spacing1
                &.site-links li
                    align-items: center
                    display: flex
                    justify-content: flex-end
                    position: relative
                    a
                        @include stretched-link
                    &.facebook
                        @include icon(social-facebook, after)
                    &.instagram
                        @include icon(social-instagram, after)
                    &.linkedin
                        @include icon(social-linkedin, after)
                    &.mastodon
                        @include icon(social-mastodon, after)
                    &.youtube
                        @include icon(social-youtube, after)
                    &.x
                        @include icon(social-x, after)
                    &.peertube
                        @include icon(social-peertube, after)
                    &.vimeo
                        @include icon(social-vimeo, after)
                    &.tiktok
                        @include icon(social-tiktok, after)
                    &::after
                        font-size: $footer-icons-size
                        @include media-breakpoint-up(md)
                            padding-left: $spacing0
                    @include media-breakpoint-down(desktop)
                        width: fit-content
                        flex-direction: row-reverse
                        &::after
                            margin-right: $spacing0
        @if $footer-text-hidden
            &-social.site-links li
                font-size: 0

    @include media-breakpoint-down(desktop)
        .container
            + .container,
            > * + *
                margin-top: $spacing3

    @include media-breakpoint-up(desktop)
        .container
            display: flex
            justify-content: space-between
            padding-bottom: $spacing3
            + .container
                padding-top: $spacing3
                padding-bottom: 0
        .footer
            &-site, &-social
                text-align: right
            &-social
                order: 2