// Custom radio buttons

// rule filter to block browsers that don't support that selector from applying rules they shouldn't
.custom-radio:not(#unsupported) {
	cursor: pointer;

	input {
		opacity: 0;
		width: 20px;

		&:focus + .custom-radio-element {
			box-shadow: 0 0 0 1px $inputBorderFocus;
			outline: thin dotted;
		}
	}

	.custom-radio-element {
		display: inline-block;
		width: 8px; height: 8px;
		margin: 0 0 2px 0;
		@include margin-right($rtl, $spacingXs);
		@include margin-left($rtl, -20px);
		border: 3px solid $white;
		border-radius: 50%;
		background-color: $white;
		vertical-align: middle;
		box-shadow: 0 0 0 1px $inputBorder;
	}

	&:hover {
		.custom-radio-element {
			box-shadow: 0 0 0 1px mix(#000000, $inputBorder, 25%);
		}
	}

	input:checked + .custom-radio-element {
		background-color: mix(#ffffff, $black, 20%);
	}
}