/*
Collapse cart
=======================================
The collapse cart element is an alternative to the offcanvas shopping cart inside Shopware 5. The collapse cart displays a shopping cart dropdown element similar to the default Shopware 4 cart.

The Settings can be modified in the backend theme manager.

The collapse cart element contains the current items in the users shopping cart and the subtotal price amount.
*/

.container--ajax-cart {
    .unitize(top, 50);
    .unitize(margin-right, 10);
    .unitize-padding(15, 0, 0, 0);
    position: absolute;
    text-align: left;
    right: 0;
    z-index: @zindex-collapse-cart;
    display: none;

    &.off-canvas {
        .unitize-width(280);
        .transition(all 0.45s cubic-bezier(.3,0,.15,1));
        margin-right: 0;
        display: block;
        height: 100%;
        left: auto;
        position: fixed;
        top: 0;
        padding: 0;
        background: #fff;
        z-index: @zindex-collapse-cart-offcanvas;

        .icon--loading-indicator {
            .unitize-width(38);
            .unitize-height(38);
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    }

    .icon--loading-indicator {
        .unitize-width(21);
        .unitize-height(21);
        .unitize-padding(20, 0);
        margin: 0 auto;
        display: block;
        position: relative;
        box-sizing: content-box;

        &:before {
            .border-radius(100%);
            .animation(keyframe--spin 1s linear infinite);
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: block;
            content: "";
            border: 2px solid #CCC;
            border-top: 2px solid #333;
        }
    }

    .product--essential-features {
        .unitize(margin-left, 48);
    }
}

.ajax--cart {
    .unitize-width(450);
    .border-radius();
    .unitize(font-size, 14);
    border: 1px solid @border-color;
    position: relative;
    background: #fff;

    &:after,
    &:before {
        .unitize(right, 10);
        bottom: 100%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    &:after {
        .unitize(right, 11);
        .unitize(border-width, 9);
        border-bottom-color: #fff;
    }

    &:before {
        .unitize(border-width, 10);
        border-bottom-color: @border-color;
    }

    .content--loader {
        .unitize-width(21);
        .unitize-height(21);
        .unitize-padding(20, 0);
        .box-sizing(content-box);
        margin: 0 auto;
    }

    .item--container {
        .unitize-padding(0, 10);
        .unitize-max-height(353);
        overflow-y: auto;
    }

    .alert {
        .reset-border-radius();
        .unitize(margin-bottom, 10);

        .alert--icon,
        .icon--element {
            width: 15%;

            .is--warning {
                color: @highlight-notice;
                background: desaturate(lighten(@highlight-notice, 42%),20%);
            }

            .is--success {
                color: @highlight-success;
                background: desaturate(lighten(@highlight-success, 42%),20%);
            }
        }

        .alert--content {
            width: 85%;
        }
    }

    .cart--item {
        .unitize-padding(10, 0);
        .unitize(line-height, 38);
        border-bottom: 1px solid @border-color;
        overflow: hidden;

        &:last-child {
            border: 0 none;
        }

        &.is--empty {
            padding-bottom: 0;
        }

        .thumbnail--container {
            .unitize-margin(0, 10, 0, 0);
            .unitize-width(38);
            .unitize-height(38);
            .border-radius();
            float: left;
            position: relative;

            &.has--image {
                border: 1px solid @border-color;
                background: #FFFFFF;
            }

            .cart--badge {
                .border-radius-multi(3px, 0, 0, 3px);
                .unitize-width(14);
                display: block;
                position: absolute;
                height: 100%;
                top: 0;
                left: 0;
                background: @brand-primary;

                .badge--free {
                    .rotate(-90deg);
                    .unitize(font-size, 8);
                    .unitize(line-height, 12);
                    .unitize-width(40);
                    color: #fff;
                    text-transform: uppercase;
                    text-align: center;
                    font-weight: @font-bold-weight;
                    display: block;
                    position: absolute;
                    padding: 0;
                    margin: 0;
                    top: 0;
                    bottom: 0;
                }
            }

            .basket--badge {
                .unitize(line-height, 37);
                .unitize(font-size, 12);
                .border-radius(100%);
                .unitize-height(35);
                .unitize-width(35);
                margin: 0 auto;
                text-align: center;
                font-weight: @font-bold-weight;
                background: @text-color;
                color: #fff;

                .icon--arrow-right {
                    .unitize(font-size, 10);
                }

                .icon--coupon {
                    .unitize(font-size, 20);
                    .unitize(line-height, 37);
                }
            }
        }

        .thumbnail--image {
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .item--link {
            color: @text-color;
        }

        .item--quantity {
            .unitize-margin(0, 5, 0, 0);
            font-weight: @font-bold-weight;
        }

        .item--price {
            font-weight: @font-bold-weight;
            float: right;
        }

        .action--container {
            .unitize-width(21);
            .unitize-height(21);
            .unitize-margin(10, 0, 0, 10);
            line-height: 1;
            float: right;

            .btn {
                .unitize-height(21);
                .unitize-width(21);
                .unitize-padding(4, 5);
                .unitize(font-size, 8);
                .unitize(line-height, 14);
            }

            *[class*="icon--"] {
                margin: 0;
                padding: 0;
            }
        }
    }

    .prices--container {
        .unitize-padding(10, 10);
        border-top: 1px solid @border-color;

        .prices--articles-amount {
            float: right;
        }

        .prices--articles {
            color: @text-color-dark;
            font-weight: @font-bold-weight;
        }

        .prices--tax {
            font-size: 12px;
            font-size: 0.75rem;
            margin: 0;
        }
    }

    .button--container {
        .unitize-padding(10, 10);
        overflow: hidden;

        *[class*="button--"] {
            .unitize-width(210);
            .border-radius();
            text-align: center;
        }

        .button--checkout {
            float: right;
        }

        .button--open-basket *[class^="icon--"] {
            display: none;
        }
    }

    .small--information {
        .unitize(font-size, 12);

        .small--prices {
            float: right;
        }
    }

    .context--shipping-costs{
        .unitize(margin-left, 10);
    }

    .table--shipping-costs-trigger {
        .unitize(font-size, 12);
        .unitize(margin-bottom, 5);
        font-weight: @font-bold-weight;
    }

    .table--shipping-costs-trigger-no-action {
        .unitize(font-size, 12);
        .unitize(margin-bottom, 5);
    }

    .table--shipping-costs {
        .unitize(font-size, 12);

        .select-field {
            .unitize-max-height(40);
            .unitize-margin(5, 10, 5, 0);
        }

        label {
            .unitize(font-size, 12);
            font-weight: @font-bold-weight;
            .unitize-margin(5, 100, 0, 0);
            float: left;
        }
    }
}

.off-canvas .ajax--cart {
    .unitize(font-size, 14);
    background: #fff;
    width: auto;
    position: absolute;
    left: 0;
    right: 0;
    border: 0 none;
    min-height: 100%;

    .item--container {
        max-height: none;
    }

    .cart--item {
        .unitize(line-height, 19);

        .item--link {
            .unitize-width(149);
            display: inline-block;
        }

        .item--price {
            float: none;
            display: block;
        }
    }

    .prices--container {
        background: #fff;
        border-bottom: 0 none;
    }

    .action--container,
    .action--container .action--remove {
        .unitize-width(38);
        .unitize-height(38);
    }

    .action--container {
        margin: 0;

        .action--remove {
            .unitize(font-size, 14);
            text-align: center;
            vertical-align: middle;
        }

        .icon--loading-indicator {
            .unitize-width(21);
            .unitize-height(21);
            .unitize-margin(9, 0, 0, 0);
            position: relative;
            margin-left: auto;
            margin-right: auto;
        }

        *[class*="icon--"] {
            .unitize(line-height, 28);
            margin: 0;
            padding: 0;
        }
    }

    .button--container {
        text-align: left;

        *[class*="button--"] {
            .unitize-margin(10, 0, 0, 0);
            width: 100%;
        }

        .button--checkout {
            margin: 0;
        }

        .button--open-basket {
            .unitize(padding-right, 30);

            *[class^="icon--"] {
                display: block;
                .unitize(right, 10);
            }
        }
    }

    .product--essential-features {
        .unitize(margin-top, 5);
    }
}

.product--essential-features {
    .unitize(line-height, 18);
    .unitize(font-size, 12);
}

@media screen and(min-width: @tabletViewportWidth) {
    .container--ajax-cart.is--shown {
        display: block;
    }
}

@media screen and(min-width: @desktopViewportWidth) {
    .container--ajax-cart {
        margin-right: 0;
    }
}
