/* -------------------------------------------
    Custom Icons
---------------------------------------------- */

// Menu Icon
.menu-icon {
	display: inline-block;
	color: var(--alpha-change-color-light-1);
	width: 1.7rem;
	&::before,
	&::after {
		display: block;
		content: '';
		width: 100%;
	}
	&::before {
		height: 6px;
		border-top: 2px solid;
		border-bottom: 2px solid;
	}
	&::after {
		height: 4px;
		border-bottom: 2px solid;
	}
}

//  Close Icon
.close-icon {
	display: block;
	position: relative;
	width: 30px;
	height: 30px;
	color: var(--alpha-change-color-light-3);
	transform: rotateZ(45deg);

	&::before,
	&::after {
		display: block;
		position: absolute;
		content: '';
	}

	&::before {
		border: 1px solid;
		width: 100%;
		left: 0;
		top: calc(50% - 1px);
	}

	&::after {
		height: 100%;
		border: 1px solid;
		top: 0;
		left: calc(50% - 1px);
	}
}

.minicart-icon {
	display: inline-block;
	position: relative;
	width: 2.5em;
	height: 2.5em;
	margin-top: 1px;
	border: solid 2px;
	border-radius: $corner-sm;
	text-align: center;
	transition: background .4s;

	&::before {
		content: '';
		position: absolute;
		/* top: -9px; */
		top: -.75em;
		/* left: 7px; */
		#{$left}: .585em;
		/* width: 12px; */
		width: 1em;
		/* height: 6px; */
		height: .5em;
		border-radius: corner-values($corner-lg $corner-lg 0 0);
		border: inherit;
		border-bottom: none;
		transition: transform .4s;
	}

	&.adding::before {
		transform: rotateZ(30deg) translate(3px, -3px);
	}
}

.minicart-icon2 {
	height: 1.83em;
	transition: color .4s;

	&::before {
		content: '';
		display: block;
		position: absolute;
		/* top: -3.14px;*/
		top: -0.3em;
		left:  50%;
		transform: translateX(-50%) scale(.7);
		/* width: 15.714px; */
		width: 1.29em;
		/* height: 12.85px; */
		height: 1.07em;
		border: solid 2px;
		border-radius: corner-values($corner-lg $corner-lg 0 0);
		border-bottom: none;
	}
	&::after {
		content: '';
		display: inline-block;
		/* width: 30px; */
		width: 2.5em;
		/* height: 25.71px; */
		height: 2.1425em;
		border: solid 2px;
		background-color: transparent;
		border-radius: corner-values(0 0 $corner-sm $corner-sm);
		transform: scale(.7);
	}
}

// Dashboard Icons
.icon-orders::before {
	content: '\e979';
}
.icon-downloads::before {
	content: '\e957';
}
.icon-addresses::before {
	content: '\e929';
}
.icon-account::before {
	content: '\e98b';
}
.icon-wishlist::before {
	content: '\e98d';
}
.icon-vendor::before {
	content: '\e920';
}
.icon-logout::before {
	content: '\e931';
}