@use "../../../../../../dev/assets/sass/_settings/mixinscontrast" as *;

.mod-footer {
    position: relative;
    background-color: $color-light-grey;

    > .m-wrapper {
        padding: 40px 0;

        &.is-contrast {
            @include contrast-theme($color-black, $color-white, false);
        }

        > .m-container-footer {
            max-width: 1447px;
            position: relative;
            margin: 0 auto;
            padding: 0 20px;

            > .m-top-footer {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;

                @include mq(tablet) {
                    flex-direction: unset;
                }

                > .m-column-left,
                > .m-column-right {
                    color: $color-black;
                    width: 100%;
                    padding-top: 60px;
                    margin-top: auto;
                    align-self: center;

                    @include mq(desktop) {
                        padding-top: 30px;
                    }
                }

                > .m-column-left {
                    padding-top: 45px;
                    align-self: flex-end;

                    @include mq(desktop) {
                        width: 600px;
                    }

                    > .m-row-top {
                        > .m-logo {
                            max-width: 198px;
                            height: auto;

                            > a {
                                > img {
                                    width: 75%;
                                    height: 100%;

                                    body.is-contrast & {
                                        filter: brightness(2);
                                    }
                                }
                            }
                        }
                    }

                    > .m-text {
                        padding-top: 30px;

                        > p {
                            text-align: left;

                            &.m-logo-name {
                                font-weight: 700;
                            }
                        }
                    }
                }

                > .m-column-right {
                    padding-top: 60px;

                    @include mq(desktop) {
                        width: calc(100% - 600px);
                        padding-left: 60px;
                    }

                    > .m-nav {
                        > .m-menu {
                            display: flex;
                            flex-direction: column;
                            grid-template-columns: 1fr 1fr;
                            gap: 10px;
                            list-style-type: none;
                            padding: 0;
                            justify-items: baseline;

                            @include mq(desktop) {
                                display: grid;
                                justify-items: end;
                            }

                            > li {
                                flex-direction: column;
                                text-align: left;
                                position: relative;
                                padding-top: 10px;

                                &::before {
                                    position: absolute;
                                    content: '';
                                    display: inline-block;
                                    height: 100%;
                                    width: 20px;
                                    background-image: url('../../assets/svg/right-arrow.svg');
                                    background-size: contain;
                                    background-repeat: no-repeat;
                                    margin-right: 0;
                                    left: -5px;
                                    top: 35%;
                                }

                                > a {
                                    text-decoration: none;
                                    color: $color-black;
                                    padding-left: 0;
                                    //font-size: $font-size-menu;
                                    //line-height: $line-height-menu;

                                    @include mq(desktop) {
                                        padding-left: 15px;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            > .m-bottom-footer {
                display: flex;
                justify-content: center;
                padding-top: 60px;
                flex-direction: column;
                align-items: start;
                gap: 20px;

                @include mq(tablet) {
                    align-items: end;
                }

                @include mq(desktop) {
                    flex-direction: row;
                    align-items: center;
                    gap: 20px;
                }

                > .m-column-left,
                > .m-column-right {
                    color: $color-black;
                    width: 50%;
                    max-height: 100%;
                    overflow-y: auto;
                    align-self: center;

                    @include mq(desktop) {
                        padding-top: 0;
                    }
                }

                > .m-social-media {
                    width: 100%;

                    > ul {
                        display: flex;
                        list-style: none;
                        flex-direction: row;
                        gap: 20px;
                        justify-content: start;
                        align-items: center;
                        padding: 0;

                        @include mq(desktop) {
                            justify-content: end;
                        }

                        > li {
                            > a {
                                > figure {
                                    height: auto;
                                    max-width: 25px;

                                    > img {
                                        width: 25px;
                                        height: auto;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}