// DIRECTIONAL
// ---------------------------------------------------------------
$rtl: 0 !default;
$dir: ltr !default;

@import "../theme/theme-imports";

#header .my-account,
#header .my-wishlist,
#header .yith-woocompare-open {
    color: var( --porto-header-link-color-regular, #999 );
}
#header .my-account:hover,
#header .my-wishlist:hover,
#header .yith-woocompare-open:hover {
    color: var( --porto-header-link-color-hover, #999 );
}

#mini-cart .cart-subtotal,
#mini-cart .minicart-icon,
#mini-cart.minicart-arrow-alt .cart-head:after { color: var( --porto-minicart-icon-color, #999 ); }


.yith-woocompare-open {
    .compare-icon {
        position: relative;
        margin-#{$right}: 5px;
    }
    .hicon-label {
        font-size: .54em;
    }
    span {
        display: inline-block;
        vertical-align: middle;
    }
    >:last-child {
        margin-#{$right}: 0;
    }
}


#mini-cart .cart-head {
    @include display-flex;
    align-items: center;
}

/* Mini Cart */
#mini-cart {
    display: inline-block;
    position: relative;
    white-space: normal;
    vertical-align: middle;

    .cart-head {
        position: relative;
        cursor: pointer;
        justify-content: center;
        font-size: 26px;
        &:before {
            content: '';
            position: absolute;
            top: 100%;
            height: 15px;
            #{$left}: 0;
            width: 100%;
            z-index: 1;
        }
    }
    .cart-icon {
        position: relative;
    }
    .cart-icon,
    &.minicart-text .cart-head {
        &:after {
            content: '';
            border-width: 1px 1px 0 0;
            border-color: var(--porto-title-bgc);
            border-style: solid;
            background: var(--porto-normal-bg);
            width: 14px;
            height: 14px;
            position: absolute;
            top: calc(100% + 1px);
            left: 50%;
            margin-left: -7px;
            transform: rotate(-45deg);
            z-index: 1006;
            display: none;
            animation: arrowFadeInDown .2s ease-out;
        }
    }

    &.minicart-text .cart-icon:after {
        content: none;
    }
    .minicart-icon {
        display: block;
        font-style: normal;
        transition: 0.2s ease;  
    }

    .cart-popup {
        position: absolute;
        width: 320px;
        -webkit-backface-visibility: hidden;
        z-index: 1005;
        top: 100%;
        margin-top: 8px;
        #{$right}: 0;
        padding: 0;
        box-shadow: $menu-narrow-box-shadow;
        text-align: $left;
        display: none;
        animation: menuFadeInDown .2s ease-out;

        @media #{$screen-medium} {
            width: 300px;
        }
    }

    .widget_shopping_cart_content {
        padding: 10px 15px 5px;
        font-weight: 700;
        font-size: .8125rem;
        line-height: 1.5;
        border-radius: 0;
        background: var(--porto-normal-bg);
    }

    .widget_shopping_cart {
        li.empty {
            text-align: center;
            justify-content: center;
            font-weight: 400;
        }
        .buttons {
            padding: 0 10px 10px;
        }
        .total {
            padding: 15px 10px 25px;
            text-align: #{$left};
            text-transform: uppercase;
            .amount {
                float: #{$right};
                font-size: 15px;
                font-weight: 700;
                color: inherit;
            }
        }
    }

    .cart-loading {
        height: 64px;
        width: 100%;
        background: transparent url(../../images/ajax-loader@2x.gif) no-repeat scroll center center / 16px 16px;
        opacity: .6;
    }
    li {
        align-items: normal;
    }
    li:not(.empty) {
        padding: 15px 10px;
        border-bottom: 1px solid var(--porto-gray-2);
    }
}
#mini-cart, .wishlist-popup {
    .product-details {
        position: static;
        padding-top: 0;
        a {
            overflow: visible;
            white-space: normal;
            overflow-wrap: break-word;
            font-weight: 500;
        }
    }
    .product-image {
        margin-#{$right}: 0 !important;
        order: 2;
    }
}
#mini-cart, .wishlist-popup .wishlist-item {
    .product-image {
        width: 80px;
        flex: 0 0 80px;
        border-width: 0;
    }
    .product-details {
        width: calc( 100% - 80px );
        max-width: calc( 100% - 80px );
    }
}
.wishlist-popup>h3 {
    text-transform: uppercase;
    border-bottom: solid 1px var(--porto-gray-2);
    font-size: inherit;
    line-height: 1.5;
    padding: 12px 10px;
    margin-bottom: 0;
}
#mini-cart {
    .cart_list {
        min-height: 45px;
        max-height: 300px;
        margin: 0;
        &.scroll-scrolly_visible {
            li {
                padding-#{$right}: 20px;
            }
        }
    }

    .total-count {
        padding: 12px 10px;
        border-bottom: solid 1px var(--porto-gray-2);
        a {
            color: var(--porto-heading-color);
            &:hover {
                text-decoration: underline;
            }
        }
    }
    .remove-product {
        top: -10px;
        #{$right}: -7px;
    }
    .product-image .inner {
        overflow: unset;
    }
    .quantity, .quantity .amount {
        font-weight: 400;
        font-size: .8125rem;
    }
    .quantity + span.quantity { // mini cart quantity input
        margin-#{$left}: 5px;
    }
    .buttons {
        a {
            font: 600 .75rem/1.5 var(--porto-add-to-cart-ff, var(--porto-body-ff)), sans-serif;
            letter-spacing: .025em;
            text-transform: uppercase;
            padding: .875rem 1.5rem;
            border-radius: 2px;
            float: none;
            width: 100%;
            margin-bottom: 10px;
        }
    }

    .cart-items-text {
        font-size: var(--porto-body-fs, 14px);
    }

    /* mini cart types */
    &.minicart-arrow-alt {
        .cart-head {
            &:after {
                content: "\e81c";
                font-family: 'porto';
                font-size: 0.654em;
                margin-#{$left}: 0.706em;
                transition: 0.2s ease;
            }
        }

        .cart-items-text {
            display: none;
        }
    }

    &.simple {
        .cart-items-text {
            display: none;
        }
    }

    .cart-subtotal { font-size: 0.54em; font-weight: 600; text-align: $left; line-height: 1.2 }

    &.minicart-inline {
        .cart-head {
            white-space: nowrap; 
        }
        .main-menu-wrap & { margin-top: 3px; margin-#{$left}: 5px; }
        @media (min-width: 992px) {
            .minicart-icon, .cart-items { display: none; }
            .cart-icon {
                position: static;
            }
        }
        @media #{$screen-normal} {
            margin-#{$left}: 0;
            .cart-subtotal { display: none; }
        }
    }

    &.minicart-text {
        .cart-price {
            display: block;
        }
    }

    &.minicart-offcanvas {
        .cart-icon:after,
        &.minicart-text .cart-head:after {
            content: none
        }
        .cart-popup {
            position: fixed;
            top: 0;
            height: 100%;
            bottom: 0;
            display: block;
            margin-top: 0;
            animation: none
        }
        .widget_shopping_cart_content {
            padding: 1.75rem 1.25rem .5rem;
            .buttons {
                padding-left: 0;
                padding-right: 0
            }
            .total {
                padding: 1.5rem 0
            }
        }
        .cart-loading {
            height: 100%;
        }
        li:not(.empty) {
            padding: 1.25rem 0
        }
    }

    &:not(.minicart-offcanvas) .buttons > a:first-child {
        display: none;
    }
}
.minicart-text .cart-icon {
    margin-#{$right}: 0.35em;
}

#mini-cart.simple .cart-items {
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.3)
}

#mini-cart .cart_list,
.wishlist-offcanvas .product_list_widget,
.wishlist-offcanvas .wishlist-popup,
.minicart-offcanvas .widget_shopping_cart_content {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        width: 6px;
    }
}
.wishlist-offcanvas .wishlist-popup,
.minicart-offcanvas .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
}
.wishlist-offcanvas .wishlist-popup .product_list_widget,
#mini-cart.minicart-offcanvas .widget_shopping_cart_content .cart_list {
    flex: 1;
    padding-#{$right}: 15px;
    max-height: unset;
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: var(--porto-gray-2);
    }
}
.minicart-offcanvas {
    h3 {
        font-size: 1.25rem;
    }
    .widget_shopping_cart_content {
        font-family: var(--porto-h3-ff, var(--porto-body-ff)), sans-serif;
        height: 100%;
    }
    .cart-popup {
        @if $rtl == 1 {
            transform: translateX(-105%);
        } @else {
            transform: translateX(105%);
        }
        transition: transform .35s;
    }
    &.minicart-opened .cart-popup {
        transform: translateX(0);
    }
    .button {
        background: #e7e7e7;
        color: #222529;
        &:hover, &:focus {
            background: #f1f1f1;
            color: #222529;
        }
    }
}

.minicart-overlay {
    position: fixed;
    z-index: 1004;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    min-height: 100vh;
    background: rgba(0, 0, 0, .4);
    display: none;
    svg {
        position: absolute;
        top: 1.25rem;
        #{$right}: 340px;
        width: 1.5rem;
        height: 1.5rem;
        cursor: pointer;
        @media #{$screen-medium} {
            #{$right}: 320px;
        }
    }

    .minicart-opened & {
        display: block;
    }
}

@keyframes topDown {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}

#mini-cart .cart-items,
.my-wishlist .wishlist-count,
header .compare-count,
.gutenberg-hb .compare-count {
    --porto-badge-size: 1.6em;
    position: absolute;
    #{$right}: calc( -1 * var(--porto-badge-size) / 2 + 0.2em );
    top: -0.5em;
    font-size: 0.385em;
    font-weight: 600;
    text-align: center;
    width: var(--porto-badge-size);
    height: var(--porto-badge-size);
    line-height: var(--porto-badge-size);
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    background-color: #ff5b5b;

    &.count-updating {
        animation: topDown .6s ease-in;
    }

    .items-loading {
        width: 16px;
        height: 16px;
        display: inline-block;
        background: transparent url(../../images/ajax-loader@2x.gif) no-repeat scroll center center / 16px 16px;
        margin-top: -4px;
        vertical-align: middle;
    }
    i {
        line-height: inherit
    }
}


html.touch #mini-cart.open,
html.no-touch #mini-cart:hover,
html:not(.touch):not(.no-touch) #mini-cart:hover {
    .cart-icon:after, .cart-popup, .cart-head:after {
        display: block;
    }
}
.woocommerce-cart,
.woocommerce-checkout {
    #mini-cart:hover {
        .cart-icon:after, .cart-popup {
            display: none !important;
        }
        &.minicart-text .cart-head:after {
            display: none !important;
        }
    }
}

#menu-main-menu #mini-cart {
    #{$right}: auto;
    &.minicart-arrow-alt,
    #header.sticky-header &.minicart-arrow-alt {
        margin: 0 !important;
    }
}