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
            * + *
                margin-top: $spacing0
        &-social, &-legals, &-credit
            @include meta
        &-credit
            display: block
            margin-top: $spacing0
        &-search
            padding-top: $spacing0 !important
        &-i18n
            @include dropdown-i18n
            button
                @include button-reset
                @include icon(caret-bottom, after)
                @include meta
                align-items: center
                color: inherit
                cursor: pointer
                display: flex
                justify-content: start
                padding-left: 0
                text-align: left
                &:focus,
                &:focus-visible
                    box-shadow: none
                &[aria-expanded="true"]
                    background: $dropdown-i18n-background-color
                    color: $dropdown-i18n-color
                    width: 100%
                    @include media-breakpoint-up(desktop)
                        justify-content: space-between
                    + .dropdown-menu
                        animation-duration: unset
                    &::after
                        transform: rotate(-180deg)
                &::before
                    margin-right: $spacing0
                &::after
                    margin-left: $spacing0
            button[aria-expanded="true"]
                min-width: px2rem(150)
                outline: $spacing0 solid $dropdown-i18n-background-color
            .dropdown-menu
                @include meta
                background: $dropdown-i18n-background-color
                margin-left: -$spacing0
                margin-right: -$spacing0
                margin-top: $spacing0
                a
                    color: $dropdown-i18n-color
                    padding: $spacing0
                ul
                    li + li
                        margin-top: 0
                @include media-breakpoint-up(desktop)
                    left: 0
                    max-height: calc(100vh - var(--header-height))
                    padding: 0
                    position: absolute
                    width: fit-content
                    min-width: calc(#{px2rem(150)} + #{$spacing0} * 2)
                    a
                        padding-top: 0
                    a:focus-visible
                        outline-offset: -1px
                @include media-breakpoint-down(desktop)
                    position: relative
                    li
                        border-top: 1px solid $color-border

        @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)
                    &.github
                        @include icon(social-github, after)
                    &.email
                        @include icon(social-email, after)
                    &.rss
                        @include icon(social-rss, after)
                    &::after
                        font-size: $footer-icons-size
                        @include media-breakpoint-up(desktop)
                            margin-right: half(-$spacing0)
                            padding-left: $spacing0
                    @include media-breakpoint-down(desktop)
                        width: fit-content
                        flex-direction: row-reverse
                        &::after
                            margin-right: $spacing0
                            transform: translateX(-25%)
        @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
                align-items: flex-end
                padding-top: $spacing3
                padding-bottom: 0
        .footer
            &-site, &-social
                text-align: right
            &-social
                order: 2