//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .footer-bottom {
        background: #f4f4f4;
    }
    .footer.content {
        .links {
            font-size: 0;
            margin: 0 0 12px;
            li {
                background: transparent;
                border-top: none;
                display: inline-block;
                margin: 0;
                padding: 0;
                &:not(:last-child)::after {
                    color: @djo-gray-light;
                    content: ' | ';
                    display: inline-block;
                    margin: 0 10px;
                }
            }
            a {
                color: @djo-gray-light;
                display: inline-block;
                padding: 0;
                &:visited,
                &:hover,
                &:active {
                    color: @djo-gray-light;
                }
            }
        }
        .copyright {
            background-color: transparent;
            color: @djo-gray-light;
            padding: 0;
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .footer-bottom {
        padding-bottom: 10px;
        padding-top: 10px;
        text-align: center;
    }
    .footer.content {
        .links li {
            .lib-font-size(12);
        }
        .copyright {
            .lib-font-size(12);
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .footer-bottom {
        padding-bottom: 16px;
        padding-top: 16px;
        text-align: center;
    }
    .footer.content {
        .links li {
            .lib-font-size(16);
        }
        .copyright {
            .lib-font-size(16);
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .footer.content {
        .links {
            padding-right: 0;
            li {
                .lib-font-size(16);
                margin: 0;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .footer-bottom {
        .lib-clearfix();
    }
    .footer.content {
        .links {
            float: left;
            margin-bottom: 0;
            padding-right: 0;
            text-align: left;
            width: 50%;
            li {
                .lib-font-size(14);
            }
        }
        .copyright {
            .lib-font-size(14);
            display: inline-block;
            float: right;
            text-align: right;
            width: 50%;
        }
    }
}