.chevron {
	backface-visibility: hidden;
	display: block;
	position: absolute;
	top: 58%;
	right: 10px;
	transition: transform 900ms cubic-bezier(0.86, 0, 0.07, 1), transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1), top 900ms cubic-bezier(0.86, 0, 0.07, 1), background 150ms cubic-bezier(.694, 0, .335, 1);
	z-index: 1;

	&::after,
	&::before {
		backface-visibility: hidden;
		background: $gray;
		border-radius: 2px;
		content: " ";
		display: block;
		height: 2px;
		position: absolute;
		top: 50%;
		transition: transform 900ms cubic-bezier(0.86, 0, 0.07, 1), transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1), top 900ms cubic-bezier(0.86, 0, 0.07, 1), background 150ms cubic-bezier(.694, 0, .335, 1);
		width: 10px;
		z-index: 1;
	}

	&::before {
		right: 50%;
		transform-origin: 100% 100%;
		transform: rotate(40deg) scaleY(1);
	}

	&::after {
		left: 50%;
		transform-origin: 0% 100%;
		transform: rotate(-40deg) scaleY(1);
	}

	.merlin__drawer--open & {
		top: 44%;

		&::before {
			transform-origin: 100% 0%;
			transform: rotate(-40deg) scaleY(1);
		}

		&::after {
			transform-origin: 0% 0%;
			transform: rotate(40deg) scaleY(1);
		}
	}
}