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

//
// #settings
// Layout Variables
$base-form-spacing: $sp1;
$base-label-margin: 0 $sp1 $sp2;
$base-button-padding: $sp1 $sp1-4;
$base-input-color-padding: $sp1-4;

//
// #scss

form {
	@include vertical-rhythm();
	padding: 0;
}

//
// Organizational elements
//------------------------------------------------------------------------------
//
// 1. Allow labels to use `margin` for spacing.
// 2. Chrome and Firefox set a `min-width: min-content;` on fieldsets,
//    so we reset that to ensure it behaves more like a standard block element.
//    See https://github.com/twbs/bootstrap/issues/12359.
//
label {
	display: inline-block;
	margin: $base-label-margin; // [1]
}

fieldset {
	@include vertical-rhythm();
	border: 0;
	min-width: 0;
	padding: 0; // [2]
}

legend {
	@include type(headline5, $lh: 1.5);
	@include vertical-rhythm();
	display: block;
	width: 100%;
}

//
// Control elements
//------------------------------------------------------------------------------
//
// 1. Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc
//    are properly inherited. However, `line-height` isn't addressed there.
//    Using this ensures we don't need to unnecessarily redeclare the global
//    font stack.
// 2. Change the font-size style in all browsers.
// 3. iOS adds rounded borders by default
// 4. Ensure all elements have same initial alignment
//
input,
button,
select,
optgroup,
textarea {
	font-size: 100%; // 2
	line-height: inherit; // [1]
	vertical-align: middle; // [4]
	background-color: transparent;
	background-image: none; // [3]
	background-clip: padding-box;
	border-radius: 0; // [3]
	color: inherit;
}

//
// Buttons
//------------------------------------------------------------------------------
//
// 1. Work around a Firefox/IE bug where the transparent `button` background
//    results in a loss of the default `button` focus styles.
// 2. iOS 'clickable elements' fix for role='button' Fixes 'clickability' issue
//    (and more generally, the firing of events such as focus as well) for
//    traditionally non-focusable elements with role='button'
//    see: https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
//
button {
	background: transparent;
	border: $default-border-size solid $default-gray;
	padding: $base-button-padding;
	cursor: pointer;

	&:focus {
		outline: 1px dotted; // [1]
		outline: 4px auto -webkit-focus-ring-color; // [1]
	}
}

// [2]
[role='button'] {
	cursor: pointer;
}

//
// Inputs
//------------------------------------------------------------------------------
//
// 1. Radios & Checkboxes require slight spacing on the right to account for
//    labels.
// 2. Apply a disabled cursor for radios and checkboxes.
// 3. Remove the default appearance of temporal inputs to avoid a Mobile Safari
//    bug where setting a custom line-height prevents text from being vertically
//    centered within the input. Bug report: https://github.com/twbs/bootstrap/issues/11266
// 4. This overrides the extra rounded corners on search inputs in iOS so that
//    our `.form-control` class can properly style them. Note that this cannot
//    simply be added to `.form-control` as it's not specific enough.
//    For details, see: https://github.com/twbs/bootstrap/issues/11586.
// 5. specify the minimum height of form controls.
//
// Note: Neither radios nor checkboxes can be readonly.
//
input[type='radio'],
input[type='checkbox'] {
	margin-right: $base-form-spacing; // [1]

	&:disabled {
		cursor: not-allowed; // [2]
	}
}

// [3]
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
	-webkit-appearance: listbox;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
	height: auto;
}

[type='date']::-webkit-inner-spin-button {
	display: none;
	-webkit-appearance: none;
}

// [4]
input[type='search'] {
	-webkit-appearance: none;
}

// todo: needed?
output {
	display: inline-block;
}

// [5]
button,
[type='button'],
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='reset'],
[type='search'],
[type='submit'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
[type='color'],
select,
textarea {
	min-height: $default-line-height;
}

input[type='color'] {
	vertical-align: middle; // [1]
	padding: $base-input-color-padding;
}

//
// Selects & Textareas
//------------------------------------------------------------------------------
//
// 1. Align when inline to top for better consistent alignments.
// 2. Allow only vertical resizing of textareas.
// 3. Specify the standard appearance of selects
//
select[multiple='multiple'],
textarea {
	vertical-align: top; // [1]
}

select[multiple='multiple'] {
	height: auto;
}

textarea {
	resize: vertical; // [2]
}

// [3]
select {
	-moz-appearance: none; // Firefox 40+
	-webkit-appearance: none; // Chrome 45+

	&::-ms-expand {
		background-color: transparent; // IE 10+
		border: 0; // IE 10+
		display: none; // Edge 12+, IE 11-
	}

	&::-ms-value {
		color: currentcolor; // Edge 12+, IE 11-
	}
}