//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .checkout-cart-index {
        .cart.table-wrapper {
            .cart.items {
                border-bottom: 1px solid #cccccc;
                > tbody.cart.item {
                    border-bottom: 0;
                    &.insert-parent {
                    }
                    &.insert-row {
                        border-top: 0;
                    }
                    &.even {
                        background: #fcfcfc;
                    }
                    .col.item {
                        .product-item-details {
                            .product-item-name {
                                .lib-font-size(17);
                                font-weight: 700;
                                line-height: 1.2;
                                margin-bottom: 4px;
                                + .item-options {
                                    .lib-font-size(15);
                                    margin-bottom: 0;
                                    margin-right: 0;
                                    margin-top: 0;
                                    width: 100%;
                                    dt {
                                        margin-bottom: 0;
                                        margin-right: 0;
                                        &::after {
                                            content: ":\00a0";
                                        }
                                    }
                                    dd {
                                        margin-bottom: 1px;
                                    }
                                    dt:first-child {
                                        font-weight: 400;
                                        + dd {
                                            margin-bottom: 4px;
                                        }
                                    }
                                }
                            }
                        }
                        .patient_info {
                            background-color: #fafafa;
                            border-radius: 4px;
                            display: inline-block;
                            padding: 10px;
                            margin-bottom: 8px;
                            > .field {
                                margin-bottom: 5.5px;
                                .control {
                                    .input-text {
                                        border-radius: 30px;
                                        height: 30px;
                                    }
                                }
                            }
                        }
                    }
                    .col.price {
                        .price {
                            .lib-font-size(16);
                            color: @djo-gray;
                            font-weight: 400;
                        }
                    }
                    .col.qty {
                        .input-text {
                            .lib-font-size(16);
                            border-color: @djo-gray;
                            color: @djo-gray;
                            height: 33px;
                            line-height: 1;
                            padding-left: 0;
                            padding-right: 0;
                            width: 44px;
                        }
                    }
                    .col.subtotal {
                        .price {
                            .lib-font-size(18);
                            color: @djo-gray;
                        }
                        .subtotal {
                            display: block;
                            .price {
                                .lib-font-size(16);
                                font-weight: 400;
                                text-decoration: line-through;
                            }
                            & + .discount {
                                display: block;
                                color: #cc0000;
                                margin: 0 0 3px;
                                .price {
                                    .lib-font-size(16);
                                    color: #cc0000;
                                }
                                & + .total {
                                    display: block;
                                    .price {
                                    }
                                }
                            }
                        }
                    }
                }



                // mismates
                > tbody.cart.item.mismate-left + .mismate-right,
                > tbody.cart.item.mismate-left + .insert-row + .mismate-right,
                > tbody.cart.item.mismate-left + .insert-row + .insert-row + .mismate-right,
                > tbody.cart.item.mismate-left + .insert-row + .insert-row + .insert-row + .mismate-right,
                > tbody.cart.item.mismate-left + .insert-row + .insert-row + .insert-row + .insert-row + .mismate-right {
                    border-top: 0;
                }
            }
            .item-actions {
                padding-top: 4px;
                .actions-toolbar {
                    min-height: 26px;
                    padding-top: 4px;
                    padding-bottom: 0;
                    > .action-delete {
                        left: 0;
                        width: 24px;
                    }
                    > .action-edit {
                        left: 35px;
                        width: 24px;
                    }
                    > .action-saveforlater {
                        position: absolute;
                        top: 2px;
                        display: inline-block;
                        text-decoration: none;
                    }
                    > .action-delete + .action-saveforlater {
                        left: 35px;
                    }
                    > .action-edit + .action-delete + .action-saveforlater {
                        left: 70px;
                    }
                }
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .checkout-cart-index {
        .cart.table-wrapper {
            border-top-color: #dbdfe1;
            .cart.items {
                tbody.cart.item {
                    .col.item {
                        .patient_info {
                            margin-top: 8px;
                            width: 200px;
                            > .field {
                                > .label {
                                    .lib-font-size(15);
                                    margin-left: 0;
                                    margin-right: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .checkout-cart-index {
        .cart.table-wrapper {
            .cart.items {
                tbody.cart.item {
                    .col.item {
                        padding-bottom: 0;
                        .product-item-photo {
                            float: left;
                            margin-left: 2%;
                            margin-right: 2%;
                            padding-right: 0;
                            width: 24%;
                        }
                        .product-item-details {
                            float: left;
                            margin-right: 2%;
                            padding-bottom: 0;
                            padding-right: 0;
                            width: 69%;
                        }
                    }
                    &.has-patient-edit {
                        .col.item {
                            .product-item-details {
                                width: 43%;
                            }
                            .patient_info {
                                box-sizing: border-box;
                                float: left;
                                width: 26%;
                                > .field {
                                    > .label {
                                        .lib-font-size(14);
                                        margin-left: 2px;
                                        margin-right: 2px;
                                    }
                                    .control {
                                        .input-text {
                                            .lib-font-size(14);
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.insert-row {
                        .col.item {
                            .product-item-photo {
                                margin-left: 6%;
                            }
                            .product-item-details {
                                width: 65%;
                            }
                        }
                    }
                }

                // mismates
                tbody.cart.item.mismate-left + .mismate-right,
                tbody.cart.item.mismate-left + .insert-row + .mismate-right,
                tbody.cart.item.mismate-left + .insert-row + .insert-row + .mismate-right,
                tbody.cart.item.mismate-left + .insert-row + .insert-row + .insert-row + .mismate-right,
                tbody.cart.item.mismate-left + .insert-row + .insert-row + .insert-row + .insert-row + .mismate-right {
                    .col.item {
                        .product-item-photo {
                            margin-left: 6%;
                        }
                        .product-item-details {
                            width: 65%;
                        }
                    }
                    &.has-patient-edit {
                        .col.item {
                            .product-item-details {
                                width: 40%;
                            }
                        }
                    }
                    &.insert-row {
                        .col.item {
                            .product-item-photo {
                                margin-left: 11%;
                            }
                            .product-item-details {
                                width: 60%;
                            }
                        }
                    }
                }
            }
        }
    }
}