@import '../../../../../../styles/mixins';
@import '../../../../../../styles/shared/footer.scss';

$logo-spacing: $footer-nav-spacing-y;
$copyright-spacing: $footer-nav-item-spacing-y + $footer-nav-spacing-y;
$socials-spacing: $footer-nav-item-spacing-y + $footer-nav-spacing-y;
$footer-features-bg-zindex: 1;

.footerFeatureBar {
    @include footer-layout;

    &_section {
        &--features {
            padding: 20px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);

            &:before {
                @include full-window-width;
                content: "";
                z-index: $footer-features-bg-zindex;
                background-color: var(--footer-feature-bar-background);
            }
        }
    }

    &_content {
        &--features {
            position: relative;
            z-index: $footer-features-bg-zindex + 1;
            color: var(--footer-feature-bar-text);
        }
    }

    &_col {
        &--logo {
            display: flex;
        }
        &--logo:not(#{&}--align-topRight):not(#{&}--align-bottomRight) {
            order: -1;
        }

        &--menu + &--logo:not(#{&}--align-topRight):not(#{&}--align-bottomRight) {
            @include media-xxl-down {
                margin-bottom: $logo-spacing;
            }
            @include media-xxl-up {
                padding-right: $footer-logo-spacing-x;
            }
        }

        &--menu + &--logo#{&}--align-topRight,
        &--menu + &--logo#{&}--align-bottomRight {
            @include media-xxl-down {
                margin-top: $logo-spacing;
            }
            @include media-xxl-up {
                padding-left: $footer-logo-spacing-x;
            }
        }

        &--socials#{&}--align-left {
            @include media-xxl-down {
                margin-bottom: $socials-spacing;
            }
            @include media-xxl-up {
                margin-right: auto;
            }
        }

        &--socials#{&}--align-right {
            @include media-xxl-down {
                margin-top: $socials-spacing;
            }
            @include media-xxl-up {
                margin-left: auto;
            }
        }

        &--copyright {
            @include media-xxl-down {
                margin-top: $copyright-spacing;
            }
        }
    }
}
