@use 'sass:color';
@use 'sass:meta';
@use 'sass:string';
@use 'sass:math';

.#{ $formbase__prefix }control {

	// Convert hex color to string and ensure that it's working in url()
	$svg: '%23' + string.slice(meta.inspect($formbase__svg), 2);

	position: relative;
	margin: 0 0 $formbase__margin;
	box-sizing: border-box;

	// Input -------------------------------------------------------------- //
	&__input {
		// Using display or visibility to hide the original input causes an error
		// with the native HTML form validation as the browser can't focus hidden elements.
		position: absolute;
		opacity: 0;
		// Element should have the same size and position as the checkbox/radio button,
		// so the browser shows the HTML form validation message at the correct location.
		appearance: none;
		margin: 0;
		left: 0;
		top: calc(50% - #{ math.div($formbase__control_size, 2) });
		width: $formbase__control_size;
		height: $formbase__control_size;
		pointer-events: none;
	}

	// Label -------------------------------------------------------------- //
	&__label {
		display: flex;
		align-items: center;
		position: relative;
		color: $formbase__color;

		&::before,
		&::after {
			content: '';
			// Apply display block for IE11 so flex-shrink works correctly
			display: block;
			width: $formbase__control_size;
			height: $formbase__control_size;
			border: 1px solid transparent;
		}

		&::before {
			flex-shrink: 0;
			transition: border-color $formbase__duration $formbase__timing;
			margin-right: $formbase__padding;
			border-color: $formbase__border;
			box-shadow: $formbase__shadow;
			background: $formbase__background;
		}

		&::after {
			position: absolute;
			// It's sadly very hard to render the element perfectly centered, but by using 50% - 1px is correct in most
			// situations. It always depends on previous elements and the amount of half pixels.
			top: calc(50% - #{ math.div($formbase__control_size, 2) } - 1px);
			left: 0;
			// We need another element for the radio dot and checkbox checkmark as Safari 10.0.1 has problems
			// when animating the background-size of an element that has a background color and background image.
			// Using another element and transforming it with transform is also better than animating background.
			background-size: 60%;
			background-repeat: no-repeat;
			background-position: center;
			transform: scale(0);
			transition: transform $formbase__duration $formbase__timing;
		}
	}

	&__input[type='radio'] + &__label::before {
		border-radius: 100%;
	}

	&__input[type='radio'] + &__label::after {
		// IE only accepts escaped data in url() and SASS has no escape function to do this dynamic
		// <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="512" height="512" viewBox="0 0 512 512" xml:space="preserve"><path fill="${ default }" d="M256,464c114.9,0,208-93.1,208-208c0-114.9-93.1-208-208-208C141.1,48,48,141.1,48,256C48,370.9,141.1,464,256,464z"/></svg>
		background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22#{ $svg }%22%20d%3D%22M256%2C464c114.9%2C0%2C208-93.1%2C208-208c0-114.9-93.1-208-208-208C141.1%2C48%2C48%2C141.1%2C48%2C256C48%2C370.9%2C141.1%2C464%2C256%2C464z%22/%3E%3C/svg%3E');
	}

	&__input[type='checkbox'] + &__label::after {
		// IE only accepts escaped data in url() and SASS has no escape function to do this dynamic
		// <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="512" height="512" viewBox="0 0 512 512" xml:space="preserve"><path fill="${ default }" d="M461.6,109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4,0-4.6,1-6.3,2.5L194.5,323c0,0-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4,0-6.4,3.1-8.7,5.4c-1.7,1.8-29.7,31.2-43.5,45.8c-0.8,0.9-1.3,1.4-2,2.1c-1.2,1.7-2,3.6-2,5.7c0,2.2,0.8,4,2,5.7l2.8,2.6c0,0,139.3,133.8,141.6,136.1c2.3,2.3,5.1,5.2,9.2,5.2c4,0,7.3-4.3,9.2-6.2L462,121.8c1.2-1.7,2-3.6,2-5.8C464,113.5,463,111.4,461.6,109.6z"/></svg>
		background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22#{ $svg }%22%20d%3D%22M461.6%2C109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4%2C0-4.6%2C1-6.3%2C2.5L194.5%2C323c0%2C0-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4%2C0-6.4%2C3.1-8.7%2C5.4c-1.7%2C1.8-29.7%2C31.2-43.5%2C45.8c-0.8%2C0.9-1.3%2C1.4-2%2C2.1c-1.2%2C1.7-2%2C3.6-2%2C5.7c0%2C2.2%2C0.8%2C4%2C2%2C5.7l2.8%2C2.6c0%2C0%2C139.3%2C133.8%2C141.6%2C136.1c2.3%2C2.3%2C5.1%2C5.2%2C9.2%2C5.2c4%2C0%2C7.3-4.3%2C9.2-6.2L462%2C121.8c1.2-1.7%2C2-3.6%2C2-5.8C464%2C113.5%2C463%2C111.4%2C461.6%2C109.6z%22/%3E%3C/svg%3E');
	}

	&__input[type='radio'][disabled] + &__label,
	&__input[type='checkbox'][disabled] + &__label {
		cursor: not-allowed;
		color: color.adjust($formbase__color, $lightness: 5%);
	}

	&__input[type='radio'][disabled] + &__label::before,
	&__input[type='checkbox'][disabled] + &__label::before {
		border-color: color.adjust($formbase__border, $lightness: 5%);
		background-color: color.adjust($formbase__background, $lightness: -5%);
		box-shadow: none;
	}

	&__input:focus + &__label::before {
		border-color: $formbase__active;
	}

	&__input:checked + &__label::after {
		// We use an absolute unit (px) for the background size to avoid half pixels.
		// Half pixels would transform the dot into an egg.
		transform: scale(1);
	}

}