@import '../common/vars.less';

/* Ajax Cart
==============================================================================*/
.top-cart {
    float: left;

    .block-content {
        position: absolute;
        top: 100%;
        right: 0;
        background: @mainColorScheme;
        color: @titleColor;
        width: 520px;
        padding: 0 20px 16px;
        text-align: left;
        .box-shadow(-5px, 5px, 14px, rgba(0, 0, 0, 0.2));

        @media @tablet {
            width: 460px;
        }

        .subtotal {
            margin-top: 35px;
            padding-left: 25px;
            text-transform: uppercase;
            .price {
                padding-left: 18px;
                @media @tablet {
                    padding-left: 10px;
                }
            }
            @media @tablet {
                font-size: 14px;
            }
        }
        .price,
        .label {
            font: @mainFontSize @fontBody;
            color: @titleColor;
            @media @tablet {
                font-size: 14px;
            }
        }
    }

    .actions {
        padding: 20px 15px 0;
        a {
            color: @titleColor;
            padding-left: 10px;
        }
    }
    .cart-empty {
        padding: 20px 10px 0px;
    }
}

.j2t_ajax_progress {
    padding: 20px 0 0;
}

.mini-products-list {
    padding: 0;
    list-style: none;
    min-height: 124px;
    &.mCustomScrollbar {
        margin-right: -20px;

        @media @tablet {
            li {
                margin-right: 19px;
            }
        }
    }
    li {
        padding: 23px 0 17px;
        border-bottom: 1px solid #0096a5;
        display: table;

        > div {
            display: table-cell;
            vertical-align: middle;
        }
        .product-image {
            width: 82px;
            @media @tablet {
                width: 114px;
            }
            img {
                width: 100%;
            }
        }
        .product-details {
            width: 250px;
            padding-left: 20px;
            h5 {
                margin: 0;
                font: 15px/18px @fontBody;
                @media @tablet {
                    font-size: 14px;
                }
            }
            .product-brand {
                display: block;
            }
            a {
                color: @titleColor;
                text-decoration: none;
                &:hover {
                    text-decoration: none;
                    color: #23666c;
                }
            }
            .std {
                margin-top: 5px;
                display: block;
            }
        }
        .price {
            width: 100px;
            text-align: center;
            line-height: 1;
        }
        .close {
            width: 50px;
            text-align: center;
            line-height: 1;
        }
    }
}