@import '../definitions/placeholders';
@import '../definitions/variables';
@import '../definitions/mixins';

$footer-padding: 30px;
$footer-bg-zindex: 1;
$footer-bottom-bg-zindex: 1;

%footer-links {
    @extend %reset-link;

    &:hover, &:focus {
        text-decoration: underline;
    }
}

%footer-title {
    font-size: $headingFontSize5;
    text-transform: uppercase;
}

@mixin footer-layout {
    &_wrapper {
        position: relative;
        color: var(--footer-text-color, $footer-text-color);

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

    &_section {
        position: relative;
        z-index: $footer-bg-zindex + 1;
        font-size: $headingFontSize5;
        
        &--top {
            padding-top: var(--footer-padding, $footer-padding);
            padding-bottom: var(--footer-padding, $footer-padding);
        }

        &--bottom {
            padding: 20px 0;
            color: var(--footer-bottom-text-color);

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

    &_row {
        @include grid-row;
        display: flex;

        &--bottom {
            position: relative;
            min-height: 80px;
            z-index: $footer-bottom-bg-zindex + 1;

            @include media-xxl-up {
                align-items: center;
            }
        }

        @include media-xxl-down {
            flex-direction: column;
        }
    }

    &_col {
        @include grid-item;

        &--menu,
        &--nav {
            @include media-xxl-up {
                flex-shrink: 0;
            }
        }

        &--menu {
            @include media-xxl-up {
                flex-grow: 1;
            }
        }

        &--copyright {
            @include media-md-down {
                order: 10; // Make sure copyright are always the last item for mobile breakpoint
            }
        }

        &--align-left {
            order: -1;
        }

        &--align-topRight,
        &--align-bottomRight {
            @include media-xxl-up {
                margin-left: auto;
            }
        }

        &--align-bottomLeft,
        &--align-bottomRight {
            align-items: flex-end;
        }
    }
}
