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

// Menu Icon
.menu-icon {
	display: inline-block;
	color: #fff;
	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;
	transform: rotateZ(45deg);

	&::before,
	&::after {
		display: block;
		position: absolute;
		background-color: #ccc;
		content: '';
	}

	&::before {
		height: 2px;
		width: 100%;
		#{$left}: 0;
		top: calc(50% - 1px);
	}

	&::after {
		height: 100%;
		width: 2px;
		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: 2px;
	text-align: center;
	transition: background .4s;

	&::before {
		content: '';
		position: absolute;
		top: -.75em;
		#{$left}: calc(50% - .5em);
		width: 1em;
		height: .5em;
		border-radius: corner-values(5em 5em 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(10px 10px 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 3px 3px);
		transform: scale(.7);
	}
}

.btn .d-icon-arrow-right,
.btn .d-icon-arrow-left {
	position: relative;
	// top: -1px;
}