//------------------------------------------------------------------------------------------------
// INPUTS
//------------------------------------------------------------------------------------------------

/*
Various input types
*/


// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the component without having to
find/replace variables.
*/

$component-input-focus-color: 'primary' !default;
$component-input-border-color: 'light' !default;
$component-input-disabled-background-color: 'very-light' !default;
$component-input-box-color: 'very-light' !default; // Prefix / Suffix
$component-input-disabled-text-color: 'light' !default;
$component-input-calendar-box-border-color: 'primary' !default;
$component-input-dropdown-focus-color: 'accent' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-input {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

.c-input__label {
	display: block;
	font-weight: bold;
	margin-bottom: rem(10px);
	cursor: pointer;
	white-space: nowrap;
	flex-basis: 100%;
}

.c-input__wrapper {
	flex-grow: 1;
	position: relative;
	display: flex;
	align-items: center;
}

/*
[1] Removes browser default select arrow on IE
[2] Imported from normalize.css in case these styles are included without core
*/

.c-input__field,
.c-input__dropdown-field,
.c-input__dummy {
	width: 100%;
	height: rem(35px);
	max-height: rem(35px);
	border: rem(1px) solid color($component-input-border-color);
	border-radius: $global-border-radius;
	padding: 0 rem(8px);
	font-family: inherit;
	font-size: 100%; /* [2] */
	color: inherit;
	background-color: color('white');
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: box-shadow $global-transition-duration, background-color $global-transition-duration, border-color $global-transition-duration, color $global-transition-duration;
	
	&::-ms-expand {
		display: none; /* [1] */
	}
	
	&:focus {
		outline: none;
		box-shadow: 0 rem(1px) rem(3px) rgba(0, 0, 0, 0.25), 0 0 rem(15px) rem(3px) rgba(color($component-input-focus-color), 0.5) /* [3] */
	}
}

textarea.c-input__field {
	height: auto;
	max-height: none;
	padding: rem(6px) rem(8px);
}

select.c-input__field {
	padding-right: rem(32px);
}

.c-input__hidden-field {
	display: none;
}

.c-input__dummy {
	display: flex;
	align-items: center;
}


/*
Optional tooltip element
*/

.c-input__tooltip {
	margin-left: rem(10px);
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
Optional button element
*/

.c-input__button {
	flex-basis: 100%;
	margin-top: rem(10px);
}

@include mq(sm2) {
	.c-input__button {
		flex-basis: initial;
		margin: 0 0 0 rem(10px);
	}
}

/*
Optional arrow element for use with select inputs
*/

.c-input__arrow {
	position: absolute;
	width: rem(15px);
	height: rem(9px);
	right: rem(10px);
	pointer-events: none;
}


/*
Optional icon element in prefix

[1] Icon size is relative to text size.
*/

.c-input__icon {
	fill: #a9a9a9;
	height: 1.2em; /* [2] */
	line-height: inherit;
	width: 1.2em; /* [2] */
}

/*
Element used to display general message
*/

.c-input__text {
	flex-basis: 100%;
	margin-top: rem(10px);
}

.c-input__text--error {
	color: color('negative');
	display: none;
}

/*
Length bar for when maxlength attribute is applied
*/

.c-input__length {
	width: 100%;
	margin-top: rem(10px);
	border: rem(1px) solid color('positive');
	border-radius: $global-border-radius;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: border-color $global-transition-duration;
}

.c-input__length-bar {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: color('positive-light');
	transition: background-color $global-transition-duration;
	top: 0;
	left: 0;
}

.c-input__length-text {
	position: relative;
	font-size: rem(14px);
	min-height: $global-line-height * 1em; // Set height equal to what it would be with a rendered numeber to prevent unnessesary rendering
}

.c-input__length--mid {
	border-color: color('caution');
	
	.c-input__length-bar {
		background-color: color('caution-light');
	}
}

.c-input__length--low {
	border-color: color('negative');
	
	.c-input__length-bar {
		background-color: color('negative-light');
	}
}


// JOINED BUTTON MODIFIER
//------------------------------------------------------------------------------------------------

/*
Joins input and button elements
*/

.c-input--joined-button {
	@include mq($until: sm2) {
		.c-input__wrapper,
		.c-input__button {
			width: 100%;
			display: block;
		}
		.c-input__field {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			border-bottom-width: 0;
		}
		.c-input__button {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			margin-top: 0;
		}
	}
	
	@include mq(sm2) {
		.c-input__field {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-right-width: 0;
		}
		.c-input__button {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			margin-left: 0;
		}
	}
}


// PREFIX MODIFIER
//------------------------------------------------------------------------------------------------

/*
Joins the prefix element and input
*/

.c-input--prefix,
.c-input--suffix {
	position: relative;
	
	.c-input__field {
		border-left-width: 0;
		padding-left: rem(42px);
	}
	
	.c-input__prefix,
	.c-input__suffix {
		border: rem(1px) solid color($component-input-border-color);
		background-color: color($component-input-box-color);
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: $global-border-radius;
		border-bottom-left-radius: $global-border-radius;
		padding: 0 rem(5px);
		position: absolute;
		height: 100%;
		width: rem(35px);
		bottom: 0;
		left: 0;
		
		&:focus {
			outline: none;
			box-shadow: 0 rem(1px) rem(3px) rgba(0, 0, 0, 0.25), 0 0 rem(15px) rem(3px) rgba(color($component-input-focus-color), 0.5) /* [3] */
		}
	}
	
	.c-input__prefix--simple {
		background-color: transparent;
		border-right-width: 0;
		
		& ~ .c-input__field {
			padding-left: rem(35px);
		}
	}
}


.c-input--suffix {
	.c-input__field {
		border-left-width: rem(1px);
		padding-left: rem(14px);
		padding-right: rem(60px);
	}
	
	.c-input__suffix {
		border-top-right-radius: $global-border-radius;
		border-bottom-right-radius: $global-border-radius;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		left: auto;
		right: 0;
	}
	
	.c-input__suffix--simple {
		background-color: transparent;
		border-left-width: 0;
		
		& ~ .c-input__field {
			padding-right: rem(50px);
		}
	}
	
	/*
	PASSWORD TOGGLE BUTTONS
	*/
	
	.c-input__password-icon {
		cursor: pointer;
		width: auto;
		justify-content: flex-start;
	}
	
	.c-input__password-icon__button {
		justify-content: flex-start;
		width: 100%;
		
		svg {
			margin-right: 0.3em;
		}
	}
	
	.c-input__field[type='password'] + .c-input__password-icon .c-input__password-icon__button svg {
		stroke: currentColor;
		
		.c-input__password-icon-line {
			opacity: 0;
		}
	}
	
	.c-input__field[type='text'] + .c-input__password-icon .c-input__password-icon__button svg {
		stroke: currentColor;
		
		.c-input__password-icon-line {
			stroke: currentColor;
		}
	}
}

.c-input--joined-button.c-input--suffix .c-input__suffix {
	border-radius: 0;
}


// CALENDAR MIX/MODIFIER
//------------------------------------------------------------------------------------------------

/*
Used to hook up an input to the calendar component as a mix
*/

.c-input--calendar {
	position: relative;
	
	.c-input__wrapper {
		cursor: pointer;
	}
}

.c-input__calendar {
	background-color: white;
	border: rem(1px) solid color($component-input-calendar-box-border-color);
	border-radius: $global-border-radius;
	box-shadow: 0 rem(1px) rem(5px) rgba(0, 0, 0, 0.2);
	position: relative;
	margin-top: rem(20px);
	display: none;
	left: 0;
	right: 0;
	
	&:before,
	&:after {
		content: '';
		display: none;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 rem(12px) rem(12px) rem(12px);
		border-color: transparent transparent darken(color($component-input-calendar-box-border-color), 10%) transparent;
		position: absolute;
		left: 0;
		right: 0;
		top: rem(-12px);
		z-index: 5;
		margin: auto;
	}
	
	&:after {
		border-color: transparent transparent color('white') transparent;
		top: rem(-11px);
		left: 0;
		right: 0;
		display: none;
		margin: auto;
	}
}

.c-input__calendar.is-active {
	display: block;
	
	&:before,
	&:after {
		display: block;
	}
}

// Remove certain borders within cells
.c-input__calendar tbody td:first-child,
.c-input__calendar tbody tr:last-child td:first-child {
	border-left-width: 0;
}

.c-input__calendar tbody td:last-child,
.c-input__calendar tbody tr:last-child td:last-child {
	border-right-width: 0;
}

.c-input__calendar tbody tr:last-child td {
	border-bottom-width: 0;
}

.c-input__calendar .c-calendar__main {
	border-bottom-left-radius: $global-border-radius;
	border-bottom-right-radius: $global-border-radius;
	overflow: hidden;
}

.c-input__calendar .c-calendar__time {
	border-left-width: 0;
	border-right-width: 0;
}


/*
Modifier to make the calender float below the input, rather than wedge itself
there. Typically used when on a larger screen where there's more space
available, but beware the calendar going off screen.
*/

.c-input__calendar--float.is-active {
	position: absolute;
	top: 100%;
	z-index: 4;
}

/*
Modifier to readjust the calendars container so it can be placed above the
`c-input__wrapper` element.
*/

.c-input__calendar--above {
	margin-top: 0;
	margin-bottom: rem(20px);
	
	&:before,
	&:after {
		border-width: rem(12px) rem(12px) 0 rem(12px);
		border-color: darken(color($component-input-calendar-box-border-color), 10%) transparent transparent transparent;
		top: auto;
		bottom: rem(-12px);
	}
	
	&:after {
		top: auto;
		bottom: rem(-11px);
		border-color: color($component-input-disabled-background-color) transparent transparent transparent;
	}
}

.c-input__calendar--above.c-input__calendar--float {
	top: auto;
	bottom: 100%;
}


/*
Modifier to make he calendar containers width to slightly beyond
its parent element. Use for when your calendar input is quite small
width wise to prevent the calendar from getting squashed. This effect
only kicks in past a chosen breakpoint, as on smaller screens it'll end up
going off the page.
*/

@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq(#{$bp-name}) {
		.c-input__calendar--breakout\@#{$bp-name} {
			margin-left: rem(-75px);
			margin-right: rem(-75px);
		}
	}
}


// FUZZY SEARCH MODIFIER
//------------------------------------------------------------------------------------------------

.c-input--fuzzy-search.is-active {
	.c-input__field {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	
	.c-input__dropdown {
		display: flex;
	}
}

.c-input__dropdown {
	z-index: 1;
	max-height: 500%;
	display: none;
	flex-direction: column;
	border: rem(1px) solid color($component-input-border-color);
	border-top-width: 0;
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0;
	border-bottom-right-radius: $global-border-radius;
	border-bottom-left-radius: $global-border-radius;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	background-color: color('white');
	
	ul {
		list-style: none;
		margin-left: 0;
	}
	
	li {
		display: block;
		padding: rem(8px);
		
		& span {
			background-color: color($component-input-dropdown-focus-color);
		}
		
		&:hover {
			background-color: color($component-input-box-color);
		}
		
		&:focus {
			outline: 0;
			background-color: color($component-input-dropdown-focus-color);
			
			& span {
				background-color: color(#{$component-input-dropdown-focus-color + '-dark'});
			}
		}
	}
}

.c-input__dropdown-box {
	background-color: color($component-input-box-color);
	padding: rem(12px);
	border-bottom: rem(1px) solid color($component-input-border-color);
	
	&:last-child {
		border-bottom-width: 0;
	}
}

@include mq(sm3) {
	.c-input__dropdown {
		max-height: 800%;
	}
}

@include mq(md) {
	.c-input__dropdown {
		max-height: 1000%;
	}
}


// FILE UPLOAD MODIFIER
//------------------------------------------------------------------------------------------------

.c-input--file-upload .c-input__field {
	padding: 0;
	border-width: 0;
	border-radius: 0;
	height: auto;
}


// LABEL LEFT MODIFIER
//------------------------------------------------------------------------------------------------

/*
Moves the label to the left of the input
*/

@include mq(sm2) {
	.c-input--left-label {
		.c-input__label {
			margin-bottom: initial;
			margin-right: rem(10px);
			flex-basis: initial;
			display: flex;
			align-items: center;
		}
	}
}


// COLOUR MODIFIER
//------------------------------------------------------------------------------------------------

/*
For inputs on dark backgrounds. Basically, turns it white.
*/

.c-input--invert {
	color: color('white');
	
	.c-input__field {
		color: #000000;
		
		&:focus {
			box-shadow: 0 rem(1px) rem(3px) rgba(0, 0, 0, 0.25), 0 0 rem(15px) rem(3px) rgba(color('white'), 0.5);
		}
	}
	
	.c-input__prefix,
	.c-input__dropdown {
		color: #000000;
	}
	
	.c-input__icon {
		fill: #000000;
	}
}


// SIZE MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Larger versions of input
*/

.c-input--large {
	.c-input__field {
		max-height: rem(50px);
		height: rem(50px);
	}
	
	textarea.c-input__field {
		height: auto;
		max-height: none;
	}
	
	.c-input__prefix,
	.c-input__suffix {
		width: rem(48px);
		padding: 0 rem(10px);
	}
	
	.c-input__password-icon {
		width: auto;
	}
	
	&.c-input--prefix .c-input__field {
		padding-left: rem(60px);
	}
	
	&.c-input--prefix .c-input__prefix--simple ~ .c-input__field {
		padding-left: rem(48px);
	}
}

/*
Smaller version of input
*/

.c-input--small {
	.c-input__field {
		max-height: rem(28px);
		height: rem(28px);
	}
	
	textarea.c-input__field {
		height: auto;
		max-height: none;
	}
	
	.c-input__prefix,
	.c-input__suffix {
		width: rem(28px);
	}
	
	.c-input__password-icon {
		width: auto;
	}
	
	&.c-input--prefix .c-input__field {
		padding-left: rem(36px);
	}
	
	&.c-input--prefix .c-input__prefix--simple ~ .c-input__field {
		padding-left: rem(30px);
	}
}


// STATE MODIFIERS
//------------------------------------------------------------------------------------------------

.c-input.is-negative,
.is-negative .c-input:not(.c-input--disable-state-inheritance) {
	> .c-input__wrapper {
		.c-input__field,
		.c-input__dummy,
		.c-input__prefix,
		.c-input__suffix {
			border-color: color('negative');
		}
		
		.c-input__field:focus,
		.c-input__dummy:focus {
			box-shadow: 0 rem(1px) rem(3px) rgba(0, 0, 0, 0.25), 0 0 rem(15px) rem(3px) rgba(color('negative'), 0.25);
		}
	}
	
	.c-input__text.c-input__text--error {
		display: block;
	}
}

.c-input.is-disabled > .c-input__wrapper,
.is-disabled .c-input:not(.c-input--disable-state-inheritance),
*[disabled] .c-input:not(.c-input--disable-state-inheritance) {
	* {
		pointer-events: none;
	}
	
	.c-input__field,
	.c-input__dummy {
		background-color: color($component-input-disabled-background-color);
		color: color($component-input-disabled-text-color);
		cursor: not-allowed;
	}
	
	.c-input__field + .c-input__arrow,
	.c-input__dummy + .c-input__arrow, {
		fill: color($component-input-disabled-text-color);
	}
}