// Component settings: Close
// ------------------------------------------

$c-close: (
	'bgcolor':  palette(light),
);

// ------------------------------------------


.c-close {
	@include flex(center);
	align-self: center;
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	transition: transform 180ms ease-out;

	&:after,
	&:before {
		content: '';
		position: absolute;
		top: 20px;
		right: 20%;
		left: 20%;
		height: 3px;
		margin-top: -2px;
		pointer-events: none;
		background: map-get($c-close, 'bgcolor');
		border-radius: 3px;
	}
	&:before {
		transform: rotate(45deg);
	}
	&:after {
		transform: rotate(-45deg);
	}

	&:hover {
		transform: scale(1.2);
	}
}