//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .footer.content {
        .footer-middle {
            padding: 40px 0;
        }
        // @DO - remove all references to footer-menu and keep all footer-menu-column references after the bootstrap footer menu code is deployed
        .footer-menu-container,
        .footer-menu-column-container {
            .lib-clearfix();
        }
        .footer-menu {
            &:extend(.abs-add-box-sizing all);
            float: left;
            &-heading {
                font-weight: 700;
                margin: 0 0 20px;
            }
            li {
                margin-bottom: 25px;
            }
            a {
                color: @djo-gray-light;
            }
        }
        .footer-menu-column {
            &-heading {
                font-weight: 900;
                margin: 0 0 20px;
            }
            ul {
                padding-right: 20px;
            }
            li {
                margin-bottom: 15px;
            }
            a {
                color: @djo-gray-light;
            }
        }
        .footer-logo {
            max-width: 143px;
        }
        .card-logos {
            li {
                display: inline-block;
                margin-bottom: 0;
            }
            img {
                margin: 0 2px;
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .footer.content {
        // @DO - remove all references to footer-menu and keep all footer-menu-column references after the bootstrap footer menu code is deployed
        .footer-menu-container,
        .footer-menu-column-container {
            margin-bottom: 20px;
        }
        .footer-menu {
            margin-bottom: 30px;
            min-height: 313px;
            padding: 0 2%;
            width: 50%;
            &-heading {
                .lib-font-size(18);
            }
            li {
                .lib-font-size(15);
            }
        }
        .footer-menu-column {
            margin-bottom: 30px;
            &-heading {
                .lib-font-size(18);
            }
            li {
                .lib-font-size(14);
            }
        }
        .footer-logos-container {
            text-align: center;
        }
        .footer-logo {
            margin-bottom: 10px;
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .footer.content {
        // @DO - remove all references to footer-menu and keep all footer-menu-column references after the bootstrap footer menu code is deployed
        .footer-menu {
            margin-bottom: 30px;
            min-height: 313px;
            padding: 0 2%;
            width: 50%;
            &-heading {
                .lib-font-size(22);
            }
            li {
                .lib-font-size(16);
            }
        }
        .footer-menu-column {
            margin-bottom: 30px;
            &-heading {
                .lib-font-size(22);
            }
            li {
                .lib-font-size(16);
            }
        }
        .footer-logos-container {
            .lib-clearfix();
        }
        .footer-logo {
            float: left;
        }
        .footer-badges-container {
            display: table;
            float: right;
            padding: 15px 0;
        }
        .footer-badges {
            display: table-cell;
            vertical-align: middle;
        }
        .badges-list {
            margin-right: 20px;
            padding-right: 0;
        }
        .card-logos {
            display: table-cell;
            padding-right: 0;
            vertical-align: middle;
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .footer.content {
        // @DO - remove all references to footer-menu and keep all footer-menu-column references after the bootstrap footer menu code is deployed
        .footer-menu {
            padding: 0 1%;
            width: 20%;
            &-heading {
                .lib-font-size(18);
            }
            li {
                .lib-font-size(16);
            }
        }
        .footer-menu-column-container {
            box-sizing: border-box;
            float: right;
            padding-left: 10px;
            width: 80%;
        }
        .footer-menu-column {
            margin-bottom: 0;
            &-heading {
                .lib-font-size(18);
            }
            li {
                .lib-font-size(16);
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}