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

$c-close: (
	'color':  palette(neutral, 0),
);

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


.c-close {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	position: relative;
	width: space(5);
	height: space(5);
	padding: 0;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	transition: transform 180ms ease-out;

	&:focus {
		box-shadow: 0 0 3px 2px map-get($c-close, 'color');
	}

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

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