//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .cms-block-informational {
        .cms-block-informational-inner {
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            .informational-header {
                background-color: @djo-blue;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 150%;
                font-size: 0;
                padding-left: 10px;
                padding-right: 10px;
                position: relative;

                // blue overlay over the image
                &::before {
                    background-color: fade(@djo-blue, 92%);
                    content: '';
                    height: 100%;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                }

                // vertically center the heading if it has a fixed height due to matchHeight's data-mh attribute
                .informational-header-inner {
                    position: relative;
                }
                &[data-mh] {
                    .informational-header-inner {
                        top: 50%;
                        -webkit-transform: translateY(-50%);
                                transform: translateY(-50%);
                    }
                }
            }
            .informational-body {
                border-bottom-color: @djo-blue;
                border-bottom-style: solid;
                > *:last-child {
                    margin-bottom: 0;
                }
            }
        }
        &.has-shadow {
            // padding required for top and bottom box-shadow to show
            padding-bottom: 25px;
            padding-top: 25px;
            .cms-block-informational-inner {
                -webkit-box-shadow: 0 0 40px 5px rgba(0, 0, 0, .1);
                        box-shadow: 0 0 40px 5px rgba(0, 0, 0, .1);
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .cms-block-informational {
        .cms-block-informational-inner {
            width: 250px;
            .informational-header {
                padding-bottom: 23.5px;
                padding-top: 23.5px;
                .informational-header-inner {
                    .icon {
                        margin-bottom: 10px;
                    }
                    .informational-heading {
                        .lib-font-size(24);
                    }
                }
            }
            .informational-body {
                .lib-font-size(14);
                border-bottom-width: 2px;
                padding: 20px 24px;
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .cms-block-informational {
        .cms-block-informational-inner {
            width: 360px;
            .informational-header {
                padding-bottom: 42px;
                padding-top: 42px;
                .informational-header-inner {
                    .icon {
                        margin-bottom: 16px;
                        &.joint-damage {
                            height: 65px;
                            width: 53px;
                        }
                        &.explosive-strength {
                            height: 50px;
                            width: 96px;
                        }
                        &.pain-management {
                            height: 65px;
                            width: 70px;
                        }
                        &.training-fatigue {
                            width: 71px;
                            height: 48px;
                        }
                        &.faster-recovery {
                            height: 50px;
                            width: 79px;
                        }
                    }
                    .informational-heading {
                        .lib-font-size(30);
                    }
                }
            }
            .informational-body {
                .lib-font-size(16);
                border-bottom-width: 4px;
                padding: 34px 34px 58px;
            }
        }
    }
}

// @DO - these styles correspond to the smaller, grayed out blocks in the desktop PSD
// .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
//     .cms-block-informational {
//         .cms-block-informational-inner {
//             width: 314px;
//             .informational-header {
//                 padding-bottom: 41px;
//                 padding-top: 41px;
//                 .informational-header-inner {
//                     .icon {
//                         margin-bottom: 15px;
//                         &.explosive-strength {
//                             height: 35px;
//                             width: 65px;
//                         }
//                     }
//                     .informational-heading {
//                         .lib-font-size(26);
//                     }
//                 }
//             }
//             .informational-body {
//                 .lib-font-size(14);
//                 border-bottom-width: 4px;
//                 padding: 26px 34px;
//             }
//         }
//     }
// }