@import 'variables';
@import 'mixins';
@import 'base';

footer {
    .top-links {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .left-links {
        padding: 0px;
        li {
            img {
                vertical-align: bottom;
                margin-right: 10px;
            }
            a {
                color: $darkgrey;
                font-weight: 300;
                font-size: 12px;
                font-family: $metropolis-light;
            }
        }
        .mobile {
            display: none;
        }
    }
    .right-links {
        p {
            margin: 0px;
        }
        .copywrite {
            font-size: 12px;
            padding-right: 10px;
            a {
                font-size: 12px;
                color: $darkgrey;
                font-family: $metropolis-light;
            }
        }
        a {
            vertical-align: middle;
        }
    }
    .bottom-links {
        margin: 10px 0px 30px 0px;
        p {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            font-size: 12px;

            .ot-sdk-show-settings {
                cursor: pointer;
            }
        }
        a {
            font-size: 12px;
            font-family: $metropolis-light;
            text-decoration: underline;
        }
        img {
            max-width: 75px;
            vertical-align: middle;
            margin-left: 30px;
        }
        .footer-logo {
            height: 3em;
        }
    }
    @include breakpoint(small) {
        .footer-links {
            display: block;
            .right-links {
                display: none;
            }
            .left-links {
                float: none;
                margin: 10px 0px;
                .desktop {
                    display: none;
                }
                .mobile {
                    display: inline;
                }
                .copywrite {
                    display: block;
                    margin-top:20px;
                }
            }
        }
        .bottom-links {
            margin: 10px 0px 20px 0px;
            float: none;
            img {
                margin-left: 0px;
                display: block;
                margin-top: 10px;
            }
        }
    }
}
