.admin-bar .off-canvas-cart {
    top: 32px;
}

.off-canvas-cart {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 290px;
    z-index: 10033;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: $white;
    transition: transform .25s ease;
    right: 0;
    left: auto;
    transform: translate3d(290px,0,0);
    padding: 0;

    @include media-breakpoint-up(xl) {
        right: -15px;
    }

    @media (min-width: 450px) {
        width: 420px;
        transform: translate3d(450px,0,0);
    }

    .dropdown-menu-mini-cart {
        padding: 0;
        width: auto;
        border-width: 0;
        box-shadow: none;

        .mini_cart_item {
            padding: 12px 28px 12px 20px;
        }

        p.buttons .wc-forward,
        p.buttons .wc-forward.checkout {
            @include media-breakpoint-down (md) {
                margin: 0;
            }
        }

        p.buttons .wc-forward {
            margin: 0 0 15px;

            @include media-breakpoint-up(md) {
                margin: 0;
            }
        }
    }

    .woocommerce-mini-cart {
		height: calc(100vh - 170px);
    	overflow-y: scroll;
		scrollbar-width: thin;

		&::-webkit-scrollbar {
	        background-color: #fff;
	        width: 12px;
	    }

	    &::-webkit-scrollbar-track {
	        background-color: #fff;
	    }

	    &::-webkit-scrollbar-thumb {
	        background-color: #cacaca;
	        border-radius: 16px;
	        border: 4px solid #fff;
	    }

	    &::-webkit-scrollbar-button {
	        display:none;
	    }

        .woocommerce-mini-cart-item:last-child {
            margin-bottom: 0;
        }
	}

    .woocommerce-mini-cart__total {
        padding: 1em 25px;

        @media (min-width: 450px) {
            padding: 1em 30px;
        }
    }

    .woocommerce-mini-cart__buttons {
        padding: 0 25px;

        @media (min-width: 450px) {
            padding: 6px 30px 10px;
            display: flex;
            justify-content: space-between;
        }

        .button {
            display: block;
            margin: 0 0 15px;

            @media (min-width: 450px) {
                margin: 0;
                width: 48%;
            }
        }

        .checkout {
            margin-bottom: 0;
        }
    }

    .woocommerce-mini-cart__empty-message {
        padding: 20px;
        text-align: center;
    }

    &.active {
        transform: none;

        & ~ .electro-overlay {
            opacity: 1;
            visibility: visible;
            transition: opacity .25s ease,visibility 0s ease;
        }

        &.open ~ .tooltip {
            display: none;
        }
    }

    &__header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid;
        border-color: rgba(129,129,129,.2);

        .section-title {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
        }

        .electro-close-icon {
            display: block;
            position: relative;
            height: 20px;
            width: 20px;
            top: 0;
            right: 0;

            &::before,
            &::after {
                width: 16px;
                height: 2px;
                right: auto;
            }
        }
    }
}

.electro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease,visibility 0s ease .25s;
    background-color: rgba(0,0,0,.7);
}

.electro-close-icon {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0;
    height: 100px;
    width: 100px;
    z-index: 200;
    cursor: pointer;

    &::before,
    &::after {
        content: " ";
        width: 40px;
        height: 3px;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -2px;
        margin-right: -20px;
        display: inline-block;
        background-color: #2d2a2a;

    }

    &::before {
        transform: rotate(45deg);
        transition: background-color .25s ease,transform .25s ease,-webkit-transform .25s ease;
    }

    &::after {
        transform: rotate(-45deg);
        transition: background-color .25s ease,transform .25s ease;
    }

    &:hover,&:focus {
        &::before {
            transform: rotate(0deg);
        }

        &::after {
            transform: rotate(0deg);
        }
    }
}