// sass-lint:disable variable-name-format

// Better default styles for common input elements.
// @see https://github.com/electerious/formbase
//
// Demo: http://codepen.io/electerious/pen/ENvEOb
//
// Works in all modern browsers (and IE11)
// No JavaScript, just CSS
// Works with inputs, textareas, checkboxes and radio buttons
// Zero dependencies

$formbase__prefix: '' !default;
$formbase__gutter: 2rem !default;
$formbase__background: #fff !default;
$formbase__svg: $color-primary !default;
$formbase__border: #ddd !default;
$formbase__active: $color-primary !default;
$formbase__shadow: inset 0 1px 3px rgba(0, 0, 0, .05) !default;
$formbase__duration: .3s !default;
$formbase__timing: ease !default;

// Using directly the file: _input.scss
.#{ $formbase__prefix }input {
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 $formbase__gutter / 2;
	padding: $formbase__gutter / 3;
	background: $formbase__background;
	border: 1px solid $formbase__border;
	box-shadow: $formbase__shadow;
	border-radius: 0;
	outline: none;
	resize: vertical;
	transition: border-color $formbase__duration $formbase__timing;

	&[disabled] {
		border-color: lighten($formbase__border, 5%);
		background-color: darken($formbase__background, 5%);
		box-shadow: none;
		cursor: not-allowed;
	}

	&:focus {
		border-color: $formbase__active;
	}
}

// Using directly the file: _control.scss
.#{ $formbase__prefix }control {

	// We use an absolute unit (px) for the control size to avoid half pixels.
	// Half pixels would transform the circle of the radio control into an egg.
	$size: 20px;

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

	margin: 0 0 $formbase__gutter / 2;
	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;
		pointer-events: none;
	}

	// Label -------------------------------------------------------------- //
	&-label {
		// Force display block to support multiple lines
		display: block;
		position: relative;
		padding-left: calc(#{ $size } + #{ $formbase__gutter/3 });
		will-change: transform;

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: calc(50% - #{ $size/2 });
			left: 0;
			width: $size;
			height: $size;
			border: 1px solid transparent;
		}

		&::before {
			content: '';
			position: absolute;
			top: calc(50% - #{ $size/2 });
			left: 0;
			width: $size;
			height: $size;
			border-color: $formbase__border;
			box-shadow: $formbase__shadow;
			background: $formbase__background;
			background-size: 0;
		}

		&::after {
			// 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;
			will-change: transform;
		}
	}

	&-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;
	}

	&-input[type='radio'][disabled] + &-label::before,
	&-input[type='checkbox'][disabled] + &-label::before {
		border-color: lighten($formbase__border, 5%);
		background-color: darken($formbase__background, 5%);
		box-shadow: none;
	}

	&-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);
	}

}

.#{ $formbase__prefix }select {

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

	appearance: none;
	box-sizing: border-box;
	margin: 0 0 $formbase__gutter / 2;
	padding: $formbase__gutter / 3;
	width: 100%;
	background: $formbase__background;
	// 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="${ $svg }" d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3z"/></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%2C298.3L256%2C298.3L256%2C298.3l174.2-167.2c4.3-4.2%2C11.4-4.1%2C15.8%2C0.2l30.6%2C29.9c4.4%2C4.3%2C4.5%2C11.3%2C0.2%2C15.5L264.1%2C380.9c-2.2%2C2.2-5.2%2C3.2-8.1%2C3c-3%2C0.1-5.9-0.9-8.1-3L35.2%2C176.7c-4.3-4.2-4.2-11.2%2C0.2-15.5L66%2C131.3c4.4-4.3%2C11.5-4.4%2C15.8-0.2L256%2C298.3z%22/%3E%3C/svg%3E');
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: calc(100% - #{ $formbase__gutter/3 }) center;
	border: 1px solid $formbase__border;
	box-shadow: $formbase__shadow;
	border-radius: 0;
	outline: 0;

	&[disabled] {
		border-color: lighten($formbase__border, 5%);
		background-color: darken($formbase__background, 5%);
		box-shadow: none;
		cursor: not-allowed;
	}

	&:focus {
		border-color: $formbase__active;
	}

	&::-ms-expand {
		display: none;
	}
}