//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .catalog-product-view {
        .product-info-main {
            .product-add-form {
                &.stuck {
                    background-color: #d7d7d7;
                    border-bottom: 1px solid #b4b4b4;
                    left: 0;
                    max-width: none;
                    position: fixed;
                    right: 0;
                    top: 0;
                    z-index: 999;
                    form {
                        -webkit-box-align: stretch;
                           -ms-flex-align: stretch;
                              align-items: stretch;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        max-width: 1400px;
                        margin-left: auto;
                        margin-right: auto;
                    }
                    .page-title {
                        .lib-font-size(18);
                        -ms-flex-item-align: center;
                                 align-self: center;
                        background-color: #d7d7d7;
                        font-weight: 700;
                        line-height: 1.3;
                        margin-bottom: 0;
                        padding-bottom: 12px;
                        padding-left: 20px;
                        padding-top: 12px;
                    }
                    .product-options-wrapper {
                        -webkit-box-flex: 1;
                                -ms-flex: 1 1 auto;
                                    flex: 1 1 auto;
                        margin-bottom: 0;
                        padding-bottom: 12px;
                        padding-left: 20px;
                        padding-top: 12px;
                        &:nth-last-child(2) {
                            padding-right: 20px;
                        }
                        > .fieldset {
                            -webkit-box-align: center;
                               -ms-flex-align: center;
                                  align-items: center;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-flex: 1;
                                    -ms-flex: 1 1 0px;
                                        flex: 1 1 0px;
                            -ms-flex-wrap: wrap;
                                flex-wrap: wrap;
                            height: 100%;
                            -webkit-box-pack: end;
                               -ms-flex-pack: end;
                             justify-content: flex-end;
                            padding-right: 20px;
                            > .field:not(.date) {
                                -webkit-box-flex: 1;
                                        -ms-flex: 1 1 220px;
                                            flex: 1 1 220px;
                                margin-bottom: 0;
                                max-width: 220px;
                                padding-bottom: 4px;
                                width: auto;
                                &:not(:last-of-type) {
                                    margin-right: 6%;
                                }
                                .product.attribute.sku {
                                    .lib-visually-hidden();
                                }
                            }
                        }
                        > .fieldset > div:not(.swatch-opt) {
                            display: none;
                        }
                        .swatch-opt {
                            width: 100%;
                            .swatch-attributes-container {
                                -webkit-box-align: center;
                                   -ms-flex-align: center;
                                      align-items: center;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-flex: 1;
                                        -ms-flex: 1 1 auto;
                                            flex: 1 1 auto;
                                -webkit-box-pack: end;
                                   -ms-flex-pack: end;
                                 justify-content: flex-end;
                                .swatch-attribute {
                                    margin-bottom: 0;
                                    max-width: 450px;
                                    min-height: 56px;
                                    padding-bottom: 4px;
                                    width: auto;
                                    &:not(:last-child) {
                                        margin-right: 6%;
                                    }
                                    &.color {
                                        &:not(:only-child) {
                                            max-width: 240px; // @DO - setting this to the width of 4 swatches in a slider (plus arrows and padding) so that Slick doesn't expand more than it needs to
                                        }
                                        .swatch-attribute-options {
                                            display: -webkit-box;
                                            display: -ms-flexbox;
                                            display: flex;
                                            -ms-flex-wrap: wrap;
                                                flex-wrap: wrap;
                                        }
                                    }
                                    &.swatches-to-dropdown,
                                    &.has-dropdown {
                                        -webkit-box-flex: 1;
                                                -ms-flex: 1 1 220px;
                                                    flex: 1 1 220px;
                                        max-width: 220px;
                                    }
                                    .swatch-attribute-selected-option {
                                        .lib-visually-hidden();
                                    }
                                    .product.attribute.sku {
                                        .lib-visually-hidden();
                                    }
                                    .swatch-attribute-options {
                                        min-height: 41px;
                                        .swatch-option {
                                            margin-left: 2px;
                                            margin-right: 2px;
                                            &.text {
                                                background-color: #fff;
                                                border-color: #b4b4b4;
                                                &:not(.disabled) {
                                                    &:hover {
                                                        border-color: #fff;
                                                    }
                                                    &.selected {
                                                        border-color: @djo-blue;
                                                        &:hover {
                                                            border-color: @djo-blue;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        .pschart-sizechart-link {
                            .lib-visually-hidden();
                        }
                        .patientinfo {
                            -webkit-box-flex: 1;
                                    -ms-flex: 1 1 auto;
                                        flex: 1 1 auto;
                            margin-bottom: 12px;
                            max-width: 200px;
                            padding-right: 15px;
                            .fieldset {
                                &.patient_info {
                                    width: 100%;
                                }
                                .field:not(.date) {
                                    width: 100%;
                                    .input-text {
                                        height: 33px;
                                    }
                                }
                            }
                        }
                        .inserts,
                        .tfc-fitrec-product {
                            width: 100%;
                            > .fieldset {
                                -webkit-box-align: start;
                                   -ms-flex-align: start;
                                      align-items: flex-start;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                > .field {
                                    &:not(.date) {
                                        width: 100%;
                                    }
                                    &.hidden {
                                        line-height: 1;
                                        margin: 0;
                                        position: relative;
                                        top: 3px;
                                        > .label {
                                            .lib-font-size(15);
                                            float: right;
                                            margin: 0;
                                        }
                                    }
                                    &.select {
                                        -webkit-box-flex: 0;
                                                -ms-flex: 0 1 auto;
                                                    flex: 0 1 auto;
                                        min-width: 140px;
                                        padding-left: 5px;
                                        padding-right: 5px;
                                        &:not(:first-child) {
                                            padding-left: 5px;
                                        }
                                        &:not(:last-child) {
                                            padding-right: 5px;
                                        }
                                        .control {
                                            select {
                                                width: 100%;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .product-options-bottom {
                        -webkit-box-align: center;
                           -ms-flex-align: center;
                              align-items: center;
                        border-left: 1px solid #b4b4b4;
                        border-top: none;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-flex: 0;
                                -ms-flex: 0 0 auto;
                                    flex: 0 0 auto;
                        margin-bottom: 0;
                        padding-bottom: 12px;
                        padding-left: 20px;
                        padding-top: 12px;
                        .product-info-stock-sku {
                            .lib-visually-hidden();
                        }
                        .estimated-hld {
                            .lib-visually-hidden();
                        }
                        .yie-outer-element {
                            .lib-visually-hidden();
                        }
                        .box-tocart {
                            margin-bottom: 0;
                            &.cannot-see-price {
                                display: none;
                            }
                            .fieldset {
                                display: inline-block;
                                .field.qty {
                                    margin-right: 20px;
                                    margin-top: 0;
                                    vertical-align: middle;
                                    width: auto;
                                    .label {
                                        .lib-visually-hidden();
                                    }
                                    .input-text.qty {
                                        .lib-font-size(16);
                                        height: 34px;
                                        width: 34px;
                                    }
                                    + .actions {
                                        display: inline-block;
                                        padding-left: 0;
                                        vertical-align: middle;
                                        width: auto;
                                        .action.tocart {
                                            font-size: @button__font-size;
                                            height: 40px;
                                            line-height: 40px;
                                            margin-right: 0;
                                            padding: 0;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .product-info-price {
                        -ms-flex-item-align: center;
                                 align-self: center;
                        background-color: #d7d7d7;
                        border-bottom: none;
                        display: block;
                        -webkit-box-flex: 0;
                                -ms-flex: 0 0 auto;
                                    flex: 0 0 auto;
                        margin-bottom: 0;
                        padding: 12px 20px;
                        width: auto;
                        .price-box {
                            display: block;
                            padding-bottom: 0;
                            text-align: left;
                            vertical-align: baseline;
                            width: auto;
                            .regular-price,
                            .special-price {
                                display: block;
                                .price-container {
                                    .price {
                                        .lib-font-size(20);
                                        color: @djo-gray;
                                        font-weight: 700;
                                    }
                                }
                            }
                            .old-price,
                            .sly-old-price {
                                display: block;
                                line-height: 1;
                                .price-container {
                                    .price {
                                        .lib-font-size(14);
                                        color: @djo-gray-light;
                                        text-decoration: line-through;
                                    }
                                }
                            }
                            .price-container {
                                .lib-font-size(18);
                                .price-label {
                                    .lib-visually-hidden();
                                }
                                > span {
                                    margin-bottom: 0;
                                }
                                .price {
                                    .lib-font-size(18);
                                    font-weight: 700;
                                    line-height: 1;
                                }
                            }
                            > .price-container {
                                display: block;
                            }
                        }
                        .price-difference {
                            .lib-visually-hidden();
                        }
                        .promo-msg {
                            .lib-visually-hidden();
                        }
                    }
                    &.dropdowns-0.swatches-0 {
                        .product-options-wrapper {
                            border-left: none;
                            margin-left: 0;
                            > .fieldset {
                                padding-right: 0;
                            }
                        }
                        .product-options-bottom {
                            border-left: 0;
                            padding-left: 0;
                        }
                    }
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .catalog-product-view {
        .product-info-main {
            .product-add-form {
                &.stuck {
                    .page-title {
                        display: none;
                    }
                    .product-options-wrapper {
                        border-left: none;
                        margin-left: 0;
                    }
                    .product-options-bottom {
                        .box-tocart {
                            .fieldset {
                                .field.qty {
                                    display: none;
                                    + .actions {
                                        .action.tocart {
                                            width: 130px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.dropdowns-0.swatches-0,
                    &.dropdowns-0.swatches-1,
                    &.dropdowns-0.swatches-2,
                    &.dropdowns-1.swatches-0,
                    &.dropdowns-1.swatches-1,
                    &.dropdowns-2.swatches-0 {
                        .page-title {
                            display: block;
                        }
                        .product-options-wrapper {
                            border-left: 1px solid #b4b4b4;;
                            margin-left: 20px;
                        }
                        .product-options-bottom {
                            .box-tocart {
                                .fieldset {
                                    .field.qty {
                                        display: inline-block;
                                        + .actions {
                                            .action.tocart {
                                                width: 160px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.dropdowns-0 {
                        &.swatches-1 {
                            .product-options-wrapper {
                                min-width: 152px;
                            }
                        }
                        &.swatches-2 {
                            .product-options-wrapper {
                                min-width: 152px * 2;
                            }
                        }
                    }
                    &.dropdowns-1 {
                        .product-options-wrapper {
                            min-width: 220px - 70px;
                        }
                        &.swatches-1 {
                            .product-options-wrapper {
                                min-width: 220px - 70px + 152px;
                            }
                        }
                        &.swatches-2 {
                            .product-options-wrapper {
                                min-width: 220px - 70px + 152px * 2;
                            }
                        }
                    }
                    &.dropdowns-2 {
                        .product-options-wrapper {
                            min-width: 220px - 70px * 2;
                        }
                        &.swatches-1 {
                            .product-options-wrapper {
                                min-width: 220px - 70px * 2 + 152px;
                            }
                        }
                        &.swatches-2 {
                            .product-options-wrapper {
                                min-width: 220px - 70px * 2 + 152px * 2;
                            }
                        }
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .catalog-product-view {
        .product-info-main {
            .product-add-form {
                &.stuck {
                    .page-title {
                        display: block;
                    }
                    .product-options-wrapper {
                        border-left: 1px solid #b4b4b4;
                        margin-left: 20px;
                    }
                    .product-options-bottom {
                        .box-tocart {
                            .fieldset {
                                .field.qty {
                                    display: inline-block;
                                    + .actions {
                                        .action.tocart {
                                            width: 160px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.dropdowns-1 {
                        .product-options-wrapper {
                            min-width: 220px;
                        }
                        &.swatches-1 {
                            .product-options-wrapper {
                                min-width: 220px + 152px;
                            }
                        }
                        &.swatches-2 {
                            .product-options-wrapper {
                                min-width: 220px + 152px * 2;
                            }
                        }
                    }
                    &.dropdowns-2 {
                        &.swatches-1 {
                            .product-options-wrapper {
                                min-width: 220px * 2 + 152px;
                            }
                        }
                        &.swatches-2 {
                            .product-options-wrapper {
                                min-width: 220px * 2 + 152px * 2;
                            }
                        }
                    }
                    &.dropdowns-3 {
                        .product-options-wrapper {
                            min-width: 220px * 3;
                        }
                        &.swatches-1 {
                            .product-options-wrapper {
                                min-width: 220px * 3 + 152px;
                            }
                        }
                        &.swatches-2 {
                            .product-options-wrapper {
                                min-width: 220px * 3 + 152px * 2;
                            }
                        }
                    }
                    &.dropdowns-4 {
                        .product-options-wrapper {
                            min-width: 220px * 4;
                        }
                        &.swatches-1 {
                            .product-options-wrapper {
                                min-width: 220px * 4 + 152px;
                            }
                        }
                        &.swatches-2 {
                            .product-options-wrapper {
                                min-width: 220px * 4 + 152px * 2;
                            }
                        }
                    }
                }
            }
        }
    }
}