//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .cms-block-container {
        .copy {
            position: relative;
            &::before {
                background-color: inherit;
            }
            .copy-inner {
                padding: 40px 0;
                .copy-heading {
                    .lib-font-size(28);
                    margin-top: 0;
                }
                .copy-subheading {
                    &.with-divider {
                        &::after {
                            background-color: @djo-blue;
                            content: '';
                            display: block;
                            height: 4px;
                            margin-top: 18px;
                            width: 54px;
                        }
                    }
                }
                p, ul, ol, li {
                    line-height: 1.6111111;
                }
                p {
                    margin-bottom: 15px;
                    &.note {
                        .lib-font-size(15);
                        font-weight: 300;
                        margin-top: 30px;
                    }
                }
                .actions-toolbar {
                    margin-top: 25px;
                    text-align: center;
                    &.left {
                        text-align: left;
                    }
                    &.right {
                        text-align: right;
                    }
                }
                .action.primary {
                    padding: 10px 30px;
                }
                .action-social-list {
                    li {
                        &:not(:last-child) {
                            margin-right: 35px;
                        }
                        a:hover,
                        a:focus {
                            svg {
                                fill: @djo-blue;
                            }
                        }
                    }
                }
                .gray {
                    color: @djo-gray;
                }
                .gray-light {
                    color: @djo-gray-light;
                }
            }
            &.has-bg {
                .copy-inner {
                    padding-left: 6%;
                    padding-right: 6%;
                }
            }
        }
        .copy-full-content {
            background-color: #fff;
            width: 100%;
        }
        .copy-full-content .copy-inner {
            padding-left: 15px;
            padding-right: 15px;
        }
        .box-shadow-all {
            -webkit-box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.1);
                    box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.1);
        }
        &.cms-block-grey {
            .copy {
                background-color: #f8f8f8;
            }
            .copy-inner {
                .copy-heading {
                    color: @djo-gray;
                }
            }
        }
        &.cms-block-brown {
            .copy {
                background-color: #78685e;
            }
            .copy-inner {
                .copy-heading {
                    color: #f8f8f8;
                }
                p {
                    a {
                        text-decoration: underline;
                    }
                }
            }
        }
        &.cms-block-blue {
            .copy {
                background-color: #fff;
            }
            .copy-inner {
                .copy-heading {
                    color: @djo-gray;
                }
            }
        }
        .filler {
            display: none;
        }
    }
    .cms-block-beige {
        background-color: #f8f8f8;
        p, ul, ol, li {
            color: @djo-gray-light;
        }
    }
    .cms-block-grey {
        background-color: #e2e2e2;
        p, ul, ol, li {
            color: @djo-gray-light;
        }
        .copy {
            background-color: #f8f8f8;
        }
        .copy-inner {
            .copy-heading {
                color: @djo-gray;
            }
        }
    }
    .cms-block-brown {
        background-color: @djo-gray;
        p, ul, ol, li, a {
            color: #f8f8f8;
        }
        .copy {
            background-color: #78685e;
        }
        .copy-inner {
            .copy-heading {
                color: #f8f8f8;
            }
            p {
                a {
                    text-decoration: underline;
                }
            }
        }
    }
    .cms-block-blue {
        background-color: #e8f6fd;
        p, ul, ol, li {
            color: @djo-gray-light;
        }
        .copy {
            background-color: #fff;
        }
        .copy-inner {
            .copy-heading {
                color: @djo-gray;
            }
        }
    }
    .cms-block-brown-light {
        background-color: #b39263;
        p, ul, ol, li, a  {
            color: #fff;
        }
    }
    .cms-block-sky {
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .cms-block-container {
        .copy {
            .copy-inner {
                p, ul, ol, li {
                    .lib-font-size(18);
                }
                &.smaller-on-mobile {
                    p, ul, ol, li {
                        .lib-font-size(16);
                    }
                }
                .copy-subheading {
                    .lib-font-size(13);
                    letter-spacing: .07em;
                }
                .action-heading {
                    .lib-font-size(13);
                    letter-spacing: .07em;
                }
                .action.primary.larger-on-mobile {
                    min-width: 226px;
                    padding-bottom: 11px;
                    padding-top: 11px;
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .slick-slide {
        .cms-block-container {
            padding-right: 15px;
            padding-left: 15px;
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .cms-block-container {
        .copy {
            .copy-inner {
                p, ul, ol, li {
                    .lib-font-size(18);
                }
                .copy-subheading {
                    .lib-font-size(16);
                    letter-spacing: .03em;
                    margin-bottom: 25px;
                }
                .action-heading {
                    .lib-font-size(16);
                    letter-spacing: .03em;
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m + 1) {
    .cms-block-container {
        .copy {
            .copy-inner {
                padding-top: 40px;
                padding-bottom: 40px;
                padding-left: 6%;
                padding-right: 6%;
                .actions-toolbar {
                    text-align: center;
                }
            }
        }
        &.no-vertical-padding {
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 15px;
            padding-right: 15px;
            .copy {
                .copy-inner {
                    padding-top: 6px;
                    padding-bottom: 0;
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .cms-block-container {
        .filler {
            display: block;
        }
    }
}