//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    //**************************************************************************
    // Layout
    //**************************************************************************
    .cms-block-comparison-chart {
        margin-bottom: 40px;
    }
    .cms-block-comparison-chart > .contained {
        position: relative;
    }
    .comparison-chart-block {
        .col-content,
        .col-headings,
        .row-content {
            float: left;
            width: 100%;
        }
        .col-content .row-content {
            &:nth-child(odd) {
                background-color: #f8f8f8;
                .sidebar-fixed {
                    background-color: #f8f8f8;
                }
            }
            // Ensures that white background color is applied in order to ignore
            // "zebra" background color pattern for alternating rows.
            &.white-bg-color {
                background-color: #fff;
                .sidebar-fixed {
                    background-color: #fff;
                }
            }
        }
        .column {
            border-left: 2px solid #fff;
            box-sizing: border-box;
            float: left;
            font-weight: 400;
            overflow: hidden;
            &:first-child {
                border-left: 0 none;
            }
            // Needed to retain equal column width. The column heading row does
            // not have a cell for the sidebar title.
            &.col-heading {
                border-left: 2px solid transparent;
            }
        }
        .sidebar-fixed {
            font-weight: 700;
            overflow: visible;
        }
    }
    .comparison-chart-block .sidebar-fixed {
        position: absolute;
        z-index: 6;
    }
    //**************************************************************************
    // Headings
    //**************************************************************************
    .comparison-chart-block .col-headings {
        position: relative;
    }
    .comparison-chart-block .col-heading {
        text-align: center;
        img {
            margin: 0 auto;
        }
    }
    .comparison-chart-block .col-headings .sidebar-fixed {
        bottom: 0;
    }
    .comparison-chart-block .col-heading .product-name-block {
        .main-product-name {
            margin-bottom: 0;
            margin-top: 0;
        }
        .product-sub-name {
            font-weight: 400;
            margin-bottom: 0;
            margin-top: .8rem;
        }
    }
    .comparison-chart-block .info-set-title {
        font-weight: 900;
        &.hide-title {
            display: none;
        }
    }
    //**************************************************************************
    // Ratings
    //**************************************************************************
    .comparison-chart-block .ratings-row .column {
        text-align: center;
        &.sidebar-fixed {
            text-align: left;
        }
    }
    .comparison-chart-block .ratings-row .product-reviews-summary {
        margin-bottom: 0;
    }
    .comparison-chart-block .ratings-row .mobile-rating-block p {
        margin-bottom: 0;
    }
    .comparison-chart-block .ratings-row .mobile-rating-block span {
        .lib-font-size(18);
        color: @djo-blue;
    }
    .comparison-chart-block .ratings-row .reviews-count {
        .lib-font-size(13);
        top: 1px;
    }
    //**************************************************************************
    // Recommended Use
    //**************************************************************************
    .comparison-chart-block .recommended-row p {
        .lib-font-size(13);
    }
    //**************************************************************************
    // Price
    //**************************************************************************
    .comparison-chart-block .price-row p {
        display: inline-block;
        font-weight: 700;
        margin-bottom: 0;
    }
    .comparison-chart-block .price-row span {
        color: @djo-gray-light;
        text-decoration: line-through;
    }
    .comparison-chart-block .price-row.info-bottom {
        text-align: center;
    }
    //**************************************************************************
    // Shop Now
    //**************************************************************************
    .comparison-chart-block .shop-row .column {
        text-align: center;
    }
    //**************************************************************************
    // Check mark cells
    //**************************************************************************
    .comparison-chart-block .column.has-check {
        height: 20px;
        &:before {
            -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
        }
        &:before {
            background-image: url(../images/cms/product-comparison-chart/icons/check-mark.svg);
            background-position: center;
            background-repeat: no-repeat;
            content: '';
            display: block;
            height: 16px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            top: 50%;
            width: 22px;
        }
    }
    //**************************************************************************
    // Title tooltips
    //**************************************************************************
    .comparison-chart-block .col-content .row-content.has-title-tooltip .arrow {
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    .comparison-chart-block .col-content .row-content.has-title-tooltip .arrow {
        background-image: url(../images/cms/product-comparison-chart/icons/arrow-down.svg);
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        top: 50%;
    }
    .comparison-chart-block .col-content .row-content.has-title-tooltip .sidebar-fixed.active {
        z-index: 8;
    }
    .comparison-chart-block .col-content .row-content.has-title-tooltip .sidebar-fixed.active .arrow {
        background-image: url(../images/cms/product-comparison-chart/icons/arrow-up.svg);
    }
    .comparison-chart-block .col-content .row-content.has-title-tooltip .sidebar-fixed:hover {
        cursor: pointer;
    }
    .comparison-chart-block .col-content .row-content.has-title-tooltip .sidebar-fixed.active {
        background-color: @djo-blue;
        color: #fff;
        &:after {
            -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
        &:after {
            content: "";
            height: 0;
            left: 50%;
            position: absolute;
            width: 0;
        }
    }
    .comparison-chart-block .has-title-tooltip .full-width-row {
        float: left;
        position: relative;
        width: 100%;
        z-index: 7;
    }
    .comparison-chart-block .has-title-tooltip .full-width-row .row-data {
        background-color: #fff;
        z-index: 7;
        p {
            .lib-font-size(12);
            display: none;
            margin-bottom: 0;
        }
        .show-row {
            display: block;
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
    //**************************************************************************
    // Swatches
    //**************************************************************************
    .comparison-chart-block .swatches-row img {
        height: 16px;
        width: 16px;
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    //**************************************************************************
    // Layout
    //**************************************************************************
    .comparison-chart-block {
        padding-left: 85px;
        .column {
            .lib-font-size(11);
            padding-left: 1%;
            padding-right: 1%;
            width: 25%;
        }
        .col-content .column {
            text-align: center;
        }
        .col-content .sidebar-fixed {
            text-align: left;
        }
    }
    //**************************************************************************
    // Headings
    //**************************************************************************
    .comparison-chart-block .col-heading {
        padding-bottom: 18px;
        padding-left: 0;
        padding-right: 0;
    }
    .comparison-chart-block .col-heading .main-product-image {
        margin-top: 10px;
        width: 40px;
    }
    .comparison-chart-block .col-heading .product-name-block {
        display: none;
    }
    .comparison-chart-block .info-set-title {
        .lib-font-size(14);
    }
    .comparison-chart-block .product-name-row.info-bottom {
        display: none;
    }
    //**************************************************************************
    // Price
    //**************************************************************************
    .comparison-chart-block .price-row.info-bottom {
        p {
            .lib-font-size(11);
        }
    }
    //**************************************************************************
    // Shop Now
    //**************************************************************************
    .comparison-chart-block .shop-row .column {
        padding: 6px 0;
    }
    .comparison-chart-block .shop-row .action.primary {
        .lib-font-size(11);
        height: 50px;
        max-width: 100%;
        padding: 8px 4px;
        width: 50px;
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    //**************************************************************************
    // Layout
    //**************************************************************************
    .cms-block-comparison-chart > .contained {
        padding-left: 4px;
        padding-right: 4px;
    }
    .comparison-chart-block {
        padding-left: 112px;
        .column {
            padding: 18px 5px;
            width: 25%;
        }
        .sidebar-fixed {
            left: 4px;
            width: 112px;
        }
        .col-content .sidebar-fixed {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }
        .col-content .sidebar-fixed {
            align-items: center;
        }
    }
    //**************************************************************************
    // Headings
    //**************************************************************************
    .comparison-chart-block .col-headings .sidebar-fixed {
        left: -112px; // This should be the negative width of the fixed sidebar width, along with content border width and general cell left border width.
        padding-left: 5px;
        padding-right: 5px;
    }
    //**************************************************************************
    // Ratings
    //**************************************************************************
    .comparison-chart-block .ratings-row .mobile-rating-block {
        display: block;
    }
    .comparison-chart-block .ratings-row .rating-block {
        display: none;
    }
    //**************************************************************************
    // Recommended Use
    //**************************************************************************
    .comparison-chart-block .recommended-row p {
        display: none;
    }
    .comparison-chart-block .recommended-row .full-width-row .row-data {
        box-shadow: inset 0px 11px 8px -10px #CCC,
                    inset 0px -11px 8px -10px #CCC;
        float: left;
        margin-left: -116px; // This should be the negative width of the fixed sidebar width, and page container left padding.
        padding: 0;
        width: 100%;
        width: calc(~"100% + 112px + 8px"); // The additional pixel width should match the fixed sidebar width, and page container left/right padding.
        p {
            .lib-font-size(12);
            display: none;
            padding: 20px;
        }
        .show-row {
            display: block;
        }
    }
    // Content Tabs
    .comparison-chart-block .recommended-row {
        .toggle {
            overflow: visible;
            padding: 0;
            position: relative;
            z-index: 0;
            &.active {
                background-color: @djo-blue;
            }
            &.active:after {
                -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                        transform: translateX(-50%);
            }
            &.active:after {
                border-bottom: 1px solid transparent;
                border-left: 9px solid transparent;
                border-right: 9px solid transparent;
                border-top: 9px solid @djo-blue;
                bottom: -10px;
                content: "";
                height: 0;
                left: 50%;
                position: absolute;
                width: 0;
            }
        }
        .arrow {
            display: block;
            height: 100%;
            overflow: hidden;
            text-indent: -999em;
            width: 100%;
            &:hover {
                cursor: pointer;
            }
        }
        .arrow:before {
            -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
        }
        .arrow:before {
            background-image: url(../images/cms/product-comparison-chart/icons/recommended-use-arrow-down.svg);
            background-position: center;
            background-repeat: no-repeat;
            content: '';
            display: block;
            height: 8px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            top: 50%;
            width: 14px;
        }
        .active .arrow:before {
            background-image: url(../images/cms/product-comparison-chart/icons/recommended-use-arrow-up.svg);
        }
    }
    //**************************************************************************
    // Title tooltips
    //**************************************************************************
    .comparison-chart-block .col-content .row-content.has-title-tooltip .sidebar-fixed {
        padding-right: 18px;
    }
    .comparison-chart-block .col-content .row-content.has-title-tooltip .sidebar-fixed.active {
        &:after {
            border-bottom: 1px solid transparent;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
            border-top: 9px solid @djo-blue;
            bottom: -10px;
        }
    }
    .comparison-chart-block .col-content .row-content.has-title-tooltip .arrow {
        height: 5px;
        right: 5px;
        width: 9px;
    }
    .comparison-chart-block .has-title-tooltip .full-width-row .row-data {
        background-color: #fff;
        box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
        float: left;
        margin-left: -116px; // This should be the negative width of the fixed sidebar width, and page container left padding.
        padding: 0;
        width: 100%; // Fallback.
        width: calc(~"100% + 112px + 8px"); // The additional pixel width should match the fixed sidebar width, and page container left/right padding.
        p {
            padding: 15px 20px;
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    //**************************************************************************
    // Layout
    //**************************************************************************
    .comparison-chart-block {
        .data-group {
            margin-top: 0;
        }
        .column {
            .lib-font-size(13);
        }
    }
    //**************************************************************************
    // Headings
    //**************************************************************************
    .comparison-chart-block .col-heading {
        padding-bottom: 21px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .comparison-chart-block .col-heading .product-name-image {
        display: none;
    }
    .comparison-chart-block .col-heading .main-product-image {
        margin-top: 0;
        width: auto;
    }
    .comparison-chart-block .info-set-title {
        .lib-font-size(16);
    }
    .comparison-chart-block .col-heading .product-name-block {
        display: block;
        margin-top: 15px;
        .main-product-name {
            .lib-font-size(18);
        }
        .product-sub-name {
            .lib-font-size(14);
        }
    }
    .comparison-chart-block .cloned-headings .col-heading {
        display: block;
    }
    //**************************************************************************
    // Price
    //**************************************************************************
    .comparison-chart-block .price-row.info-bottom {
        p {
            .lib-font-size(20);
        }
    }
    //**************************************************************************
    // Shop Now
    //**************************************************************************
    .comparison-chart-block .shop-row .action.primary {
        padding-left: 14px;
        padding-right: 14px;
        max-width: 90%;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    //**************************************************************************
    // Layout
    //**************************************************************************
    .cms-block-comparison-chart > .contained {
        padding-left: 8px;
        padding-right: 8px;
    }
    .comparison-chart-block {
        padding-left: 244px;
        .data-group {
            margin-top: 55px;
            &:first-child {
                margin-top: 0;
            }
        }
        .column {
            width: 25%;
        }
    }
    .comparison-chart-block {
        .column {
            .lib-font-size(15);
        }
    }
    .comparison-chart-block .col-content .column {
        padding: 12px 34px 12px 20px;
    }
    .comparison-chart-block .sidebar-fixed {
        left: 8px;
        width: 244px;
    }
    //**************************************************************************
    // Headings
    //**************************************************************************
    .comparison-chart-block .col-headings {
        margin-bottom: 12px;
    }
    .comparison-chart-block .col-heading {
        padding-bottom: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .comparison-chart-block .col-headings .sidebar-fixed {
        left: -244px; // This should be the negative width of the fixed sidebar width, along with content border width and general cell left border width.
        padding-left: 20px;
        padding-right: 20px;
    }
    .comparison-chart-block .cloned-headings .col-heading {
        display: none;
    }
    .comparison-chart-block .info-set-title {
        .lib-font-size(20);
    }
    //**************************************************************************
    // Ratings
    //**************************************************************************
    .comparison-chart-block .ratings-row .mobile-rating-block {
        display: none;
    }
    .comparison-chart-block .ratings-row .rating-block {
        display: block;
    }
    //**************************************************************************
    // Recommended Use
    //**************************************************************************
    .comparison-chart-block .recommended-row .arrow {
        display: none;
    }
    .comparison-chart-block .recommended-row .full-width-row {
        display: none;
    }
    //**************************************************************************
    // Title tooltips
    //**************************************************************************
    .comparison-chart-block .col-content .row-content.has-title-tooltip .sidebar-fixed.active {
        &:after {
            border-bottom: 1px solid transparent;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-top: 14px solid @djo-blue;
            bottom: -15px;
        }
    }
    .comparison-chart-block .col-content .row-content.has-title-tooltip .arrow {
        height: 7px;
        right: 15px;
        width: 12px;
    }
    .comparison-chart-block .has-title-tooltip .full-width-row .row-data {
        left: -244px; // This should be the negative width of the fixed sidebar width, along with content border width and general cell left border width.
        padding: 0;
        position: absolute;
        top: 0;
        width: 244px; // This width should match the fixed sidebar width.
        p {
            border: 1px solid #dadfe2;
            box-shadow: 5px 0px 5px -5px rgba(0, 0, 0, .7),
                        0 5px 5px -5px rgba(0, 0, 0, .7);
            padding: 17px 20px 15px;
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__896) {
    //**************************************************************************
    // Headings
    //**************************************************************************
    .comparison-chart-block .col-heading .product-name-block {
        .main-product-name {
            .lib-font-size(22);
        }
        .product-sub-name {
            .lib-font-size(18);
        }
    }
}