.c-close {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	width: space(6);
	height: space(6);
	padding: 0;
	background: none;
	color: palette(neutral, 0);
	border: 1px solid rgba(palette(primary, 200), 0.5);
	border-radius: map-get($border-radius, xs) map-get($border-radius, xs) map-get($border-radius, m) map-get($border-radius, xs);
	outline: none;
	cursor: pointer;

	&:focus {
		box-shadow: 0 0 3px 2px white;
	}

	&:after,
	&:before {
		content: '';
		position: absolute;
		top: calc(50% - 1px);
		right: space(1);
		left: space(1);
		height: 2px;
		pointer-events: none;
		background: currentColor;
		border-radius: 1px;
		transform: rotate(45deg);
		transition: transform 180ms ease-out;

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

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

.c-close--dark {
	color: palette(primary, 500);
	border-color: palette(primary, 500);
}