/* -------------------------------------------
    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: 2.9rem;
	height: 2.9rem;
	color: var(--alpha-change-color-light-3);
	transform: rotateZ(45deg);

	&::before,
	&::after {
		display: block;
		position: absolute;
		content: '';
		transition: transform .3s;
	}

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

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

	a:hover>& {
		&:before {
			transform: rotate(-45deg);
		}

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

.minicart-icon {
	display: inline-block;
	position: relative;
	width: 2.5em;
	height: 2.5em;
	margin-top: 1px;
	border: solid 2px;
	border-radius: var(--alpha-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(var(--alpha-corner-lg) var(--alpha-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(var(--alpha-corner-lg) var(--alpha-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 var(--alpha-corner-sm) var(--alpha-corner-sm));
		transform: scale(.7);
	}
}