.close-button-widget {
	display: flex;
	align-items: center;
}

.close-button-widget__button {
	--close-button-size: 56px;
	--close-cross-thickness: 3px;
	width: var(--close-button-size);
	height: var(--close-button-size);
	min-width: var(--close-button-size);
	min-height: var(--close-button-size);
	border: none;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background-color: #0f0f0f;
	color: #b5b5b5;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	cursor: pointer;
}

.close-button-widget__button:hover {
	color: #ffffff;
	transform: scale(1.05);
}

.close-button-widget__icon {
	position: relative;
	width: 50%;
	height: 50%;
	display: block;
}

.close-button-widget__icon::before,
.close-button-widget__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: var(--close-cross-thickness);
	background: currentColor;
	border-radius: 999px;
	transform-origin: center;
}

.close-button-widget__icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.close-button-widget__icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}