//------------------------------------------------------------------------------
// @base: Forms
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.1.0
// @description:
//
//------------------------------------------------------------------------------

@use 'sass:math';

//
// #settings

// Layout Variables
$input-height: $default-height;
$input-border-width: 2px;
$input-border-radius: $default-border-radius;

// Theme Variables
$input-color: $default-action-color !default;
$input-background-color: $default-background-color !default;
$input-border-color: $input-background-color !default;
$input-border-alt-color: $default-action-bg-hover !default;
$input-border-hover-color: $default-action-bg-hover !default;
$input-hover-color: $default-action-color-hover !default;
$input-placeholder-color: $default-action-color !default;
$input-disabled-color: $default-disabled-color !default;
$input-invalid-border-color: $default-error-color !default;
$input-invalid-color: $default-error-light-color !default;


//
// #scss

fieldset {
	position: relative;
}

legend {
	@include vertical-rhythm();
	line-height: unit-less($default-line-height);
}

//
// General Form element styling
//------------------------------------------------------------------------------
//
// 1. Make inputs at least the height of their button counterpart
//    (base line-height + padding + border)
// 3. This has no effect on <select>s in some browsers, due to the limited
//    stylability of `<select>`s in CSS.
// 4. Override Firefox's unusual default opacity; see
//    https://github.com/twbs/bootstrap/pull/11526.
// 5. iOS fix for unreadable disabled content;
//    see https://github.com/twbs/bootstrap/issues/11655.
// 6. HTML5 says that controls under a fieldset > legend:first-child won't be
//    disabled if the fieldset is disabled. Due to implementation difficulty, we
//    don't honor that edge case; we style them as disabled anyway.
//
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
[type='color'],
select,
textarea {
	background-color: $input-background-color;
	border: none;
	border-radius: $input-border-radius;
	color: $input-color;
	display: inline-block;
	width: 100%;
	height: $input-height;
	padding: $sp2 $sp2 0;

	&:focus {
		outline: none;
		box-shadow: none;
	}

	// [6]
	&:disabled,
	&[readonly] {
		background-color: $input-disabled-color;
		color: $white;
		opacity: 1; // [5]

		&::placeholder {
			color: $white;
		}
	}

	&:disabled {
		cursor: not-allowed;
	}
}

textarea {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 99%, $input-hover-color 1%);
	background-repeat: no-repeat;
	background-size: 0 100%;
	border-bottom: solid math.div($input-border-width, 2) $input-border-color;
	height: auto;
	padding-top: $sp3;
	transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);

	&:focus {
		background-size: 100% 100%;
		border-color: $input-hover-color;
	}
}

//
// Select elements
//------------------------------------------------------------------------------
//
// 1. Suppress the nested default white text on blue background highlight given
//    to the selected option text when the (still closed) <select> receives
//    focus in IE and (under certain conditions) Edge, as it looks bad and cannot
//    be made to match the appearance of the native widget.
//    See https://github.com/twbs/bootstrap/issues/19398.
//
select {
	background-color: $input-background-color;
	display: inline-block;
	min-width: 80px;
	max-width: 100%;
	padding: $sp1 $sp2;
	cursor: pointer;

	&:focus::-ms-value {
		background-color: $input-background-color; // [1]
		color: $input-hover-color; // [1]
	}

	&:focus:-moz-focusring {
		text-shadow: 0 0 0 $black;
		color: transparent;
	}

	&[multiple='multiple'] {
		background-image: none;
	}
}

input[type='color'] {
	width: $input-height;
	height: $input-height;
}

//
// File & Range elements
//------------------------------------------------------------------------------
//
// Make file inputs better match text inputs by forcing them to new lines.
//
input[type='file'],
input[type='range'] {
	display: inline-block;
}

input[type='file'],
input[type='radio'],
input[type='checkbox'] {
	&:focus:invalid:focus {
		outline-color: $input-invalid-border-color;
	}
}


//
// Checkbox element styling
//------------------------------------------------------------------------------
//
// 1. Remove the default browser styling.
// 2. Apply our own default styling.
// 3. Apply styling for the not checked state.
// 4. Apply styling for the checked state.
// 5. Apply styling for on hover state.
// 6. Apply styling for on disabled state.
//
[type='checkbox'] {
	//[1]
	&:not(:checked),
	&:checked {
		opacity: 0;
		position: absolute;
	}

	// [2]
	+ label {
		position: relative;
		display: inline-block;
		margin: 0 $sp1;
		padding-left: $sp4;
		cursor: pointer;
		user-select: none;
		transition: 0.28s ease;

		&:before {
			border: $input-border-width solid $input-border-hover-color;
			border-radius: $input-border-radius;
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			width: 20px;
			height: 20px;
			margin-top: $sp1-4;
			content: '';
			transition: 0.2s;
		}
	}

	// [3]
	&:indeterminate + label:before {
		border-top: none;
		border-right: $input-border-width solid $input-invalid-border-color;
		border-bottom: none;
		border-left: none;
		top: -11px;
		left: -12px;
		height: 18px;
		transform: rotate(90deg);
		transform-origin: 100% 100%;
		backface-visibility: hidden;

		// Disabled indeterminate
		&:disabled {
			background-color: transparent;
			border-right: $input-border-width solid $input-disabled-color;
		}
	}

	// [4]
	&:checked + label:before {
		border-top: $input-border-width solid transparent;
		border-right: $input-border-width solid $input-hover-color;
		border-bottom: $input-border-width solid $input-hover-color;
		border-left: $input-border-width solid transparent;
		top: -4px;
		left: -5px;
		width: 12px;
		height: 22px;
		transform: rotate(40deg);
		transform-origin: 100% 100%;
		backface-visibility: hidden;
	}

	// [5]
	&:hover:not(:checked) + label:before {
		border-color: $input-border-alt-color;
	}

	// [6]
	&:disabled {
		&:checked + label:before {
			border-right: $input-border-width solid $input-disabled-color;
			border-bottom: $input-border-width solid $input-disabled-color;
		}

		&:not(:checked) + label:before {
			background-color: $input-disabled-color;
			border: none;
		}
	}
}


//
// Radio element styling
//------------------------------------------------------------------------------
//
// 1. Remove the default browser styling.
// 2. Apply our own default styling.
// 3. Apply styling for the not checked state.
// 4. Apply styling for the checked state.
// 5. Apply styling for on hover state.
// 6. Apply styling for on disabled state.
//
[type='radio'] {
	//[1]
	&:not(:checked),
	&:checked {
		opacity: 0;
		position: absolute;
	}

	// [2]
	+ label {
		position: relative;
		display: inline-block;
		margin: 0 $sp1;
		padding-left: $sp4;
		cursor: pointer;
		user-select: none;
		transition: 0.28s ease;

		&:before,
		&:after {
			border-radius: 50%;
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			width: $sp2;
			height: $sp2;
			margin: $sp1-2 $sp1-2 $sp1-2 0;
			content: '';
			transition: 0.28s ease;
		}
	}

	// [3]
	&:not(:checked) + label {
		&:before,
		&:after {
			border: $input-border-width solid $input-border-hover-color;
		}

		&:after {
			opacity: 0;
			z-index: -1;
			transform: scale(2);
		}
	}

	// [4]
	&:checked + label {
		&:before {
			border: $input-border-width solid $input-hover-color;
		}

		&:after {
			background-color: $input-hover-color;
			z-index: 0;
			transform: scale(0.5) opacity(1);
		}
	}

	// [5]
	&:hover + label:before {
		border-color: $input-border-alt-color;
	}

	// [6]
	&:disabled {
		+ label {
			color: $input-disabled-color;
		}

		&:checked + label:before,
		&:not(:checked) + label:before {
			border: $input-border-width solid $input-disabled-color;
		}

		:checked + label:after {
			background-color: $input-disabled-color;
			border: none;
		}
	}
}


//
// Placeholder Colour
//------------------------------------------------------------------------------

::-webkit-input-placeholder {
	color: $input-placeholder-color;
}

:-moz-placeholder {
	color: $input-placeholder-color;
}

::-moz-placeholder {
	color: $input-placeholder-color;
}

:-ms-input-placeholder {
	color: $input-placeholder-color;
}


//
// Radio element styling
//------------------------------------------------------------------------------
//
// Remove the annoying default browser styling when selecting an auto complete
//

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-transition: 'color 9999s ease-out, background-color 9999s ease-out';
	-webkit-transition-delay: 9999s;
}