/* stylelint-disable */
.switcher__wrapper {
	margin-top: 14px;

	.switcher__choice {
		cursor: pointer;
		display: block;
		margin-bottom: 10px;
		position: relative;
		border-radius: 3px;
		background: #ffffff;

		.label {
			backdrop-filter: blur(10px) saturate(150%);
			background: rgba(0,0,0, 0.5);
			border-radius: 0 0 3px 3px;
			bottom: 0;
			box-sizing: border-box;
			color: #ffffff;
			padding: 5px 9px 6px;
			position: absolute;
			text-shadow: 0 0 2px rgba(0,0,0, 0.25);
			width: 100%;
		}

		img {
			background: #ffffff;
			border-radius: 3px;
			vertical-align: middle;
			height: 65px;
			width: 100%;
		}
	}

	label {
		position: relative;
	}

	label[for^="header_variation"] img,
	label[for^="footer_variation"] img {
		border: 1px solid #ccc;
	}

	input[type="radio"] {
		height: 0;
		margin: 0;
		opacity: 0;
		padding: 0;
		position: absolute;
		width: 0;
	}

	input[type="radio"]:hover + img {
    		border-color: #999;
	}

	input[type="radio"]:focus + img,
	input[type="radio"]:checked + img {
		border-color: #0085ba;
   		box-shadow: 0 0 0 1px #0085ba;
	}
}

.switcher__wrapper.color_scheme {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 0;

	& .switcher__choice {
		height: 70px;
		width: calc(50% - 7.5px);
		margin-bottom: 15px;

		& .color-scheme {
			border-radius: 3px;
			display: block;
			height: 100%;
			overflow: hidden;
			width: 100%;
		}
	}

	input[type="radio"]:hover + .color-scheme,
	input[type="radio"]:focus + .color-scheme {
   		box-shadow: 0 0 0 2px #eeeeee, 0 0 0 3px #5b9dd9, 0 0 2px 3px rgba(30,140,190,.8);
	}

	.color-scheme__check {
		bottom: 2px;
		cursor: pointer;
		display: inline-block;
		height: 28px;
		opacity: 0;
		position: absolute;
		right: 0px;
		vertical-align: middle;
		visibility: hidden;
		width: 28px;
		z-index: 9;

		&::before,
		&::after {
			background-color: #ffffff;
			border-radius: 6px;
			content: " ";
			height: 24px;
			left: 10px;
			position: absolute;
			top: 15px;
			transition: opacity 0.2s;
			width: 2px;
		}

		&:before {
			height: 13px;
			transform: translate3d(3px, -6px, 0) rotate(45deg);
		}

		&:after {
			height: 6px;
			transform: translate3d(-3px, -1px, 0) rotate(-45deg);
		}
	}

	input[type="radio"]:checked + .color-scheme {
		box-shadow: 0 0 0 2px #eeeeee, 0 0 0 3px #5b9dd9, 0 0 2px 3px rgba(30,140,190,.8);

		+ .color-scheme__check {
			opacity: 1;
			visibility: visible;
		}
	}
}

/* stylelint-enable */
