_forms.scss

@include body-class(true) {

	// HELPER: Label
	%label {
		display: inline-flex;
		padding: 0;
		border: 0;
		color: $form--label-color;
		font: $form--label-font-weight #{$form--label-font-size}/#{$form--label-line-height} $form--label-font;
	}

	// HELPER: Form control
	%form-control {
		width: 100%;
		height: $form--input-height-base;
		margin: 0;
		padding: 9px 14px;
		border: 1px solid $overcast;
		border-radius: $border-radius;
		background-color: $cloud;
		background-image: none;
		color: $nightrider;
		font: 500 15px/20px $font;
		letter-spacing: -0.25px;
		transition: 0.2s ease-in-out;
		outline: none;
		box-shadow: none;

		&::placeholder {
			color: $fiftyshades;
		}

		&:hover {
			border-color: $fiftyshades;
			background-color: $white;
			outline: none;
			box-shadow: none;
		}

		&:focus {
			border-color: $blue;
			background-color: $white;
			outline: none;
			box-shadow: 0 0 0 2px $blue-ghost;

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

		// STATE: Disabled
		&[disabled],
		&.sui-disabled,
		fieldset[disabled] & {
			pointer-events: none;
			color: $fiftyshades;
			background: $silver;
			border-color: $overcast;
		}

		// FIX:
		// Unstyle the caret on <select> in IE10+
		&::-ms-expand {
			border: 0;
			background-color: transparent;
		}
	}

	// ELEMENT: Label (Global)
	label {
		cursor: default;

		&[for] {
			cursor: pointer;
		}
	}

	// ELEMENT: Label
	.sui-label {
		@extend %label;
		display: flex;
		align-items: center;
		margin: 0 0 5px;

		.sui-tag {
			margin-left: 5px;

			&.sui-left {
				margin-right: 5px;
				margin-left: 0;
			}
		}

		&:last-child {
			margin: 0;
		}

		// VARIATION: Label link
		&-link {
			margin-right: 0;
			margin-left: auto;
			color: $form--label-color;
			font-weight: 400;
		}

		// VARIATION: Inline label
		&-inline {
			@extend %label;
			margin: 0;
		}

		// VARIATION: Label note
		&-note {
			margin-right: 0;
			margin-left: auto;
		}
	}

	// ELEMENT: Form control
	// This element allow us to style textarea and inputs (all except checkbox and radio)
	.sui-form-control {
		@extend %form-control;
		display: block;

		&.sui-input-sm {
			max-width: 80px;
		}
		&.sui-input-md {
			max-width: 240px;
		}

		// Form field prefix and suffix
		&.sui-field-has-prefix,
		&.sui-field-has-suffix {
			width: auto;
			display: inline-block;
		}
	}

	// ELEMENT: Multi checkbox
	.sui-multi-checkbox {
		@extend .sui-form-control;
		height: auto;
		max-height: 114px;
		overflow-y: auto;
		padding: 1px;

		label {
			margin: 1px 0;

			input {
				@extend %sui-screen-reader-text;

				&:checked + span {
					background-color: $blue;
					color: $white;
				}
			}

			span {
				display: block;
				padding: 10px;
			}

			&:first-child {
				margin-top: 0;

				span {
					border-radius: #{$border-radius - 1px} #{$border-radius - 1px} 0 0;
				}
			}

			&:last-child {
				margin-bottom: 0;

				span {
					border-radius: 0 0 #{$border-radius - 1px} #{$border-radius - 1px};
				}
			}
		}
	}

	// ELEMENT: Field description
	.sui-multi-checkbox label {
		display: block;
		margin-top: 5px;
		color: $form--description-color;
		font-size: $form--description-font-size;
		line-height: 22px;
		font-weight: $form--description-font-weight;
		letter-spacing: $font--letter-spacing;

		&.sui-toggle-description {
			margin-left: 48px;
		}

		&.sui-checkbox-description,
		&.sui-radio-description {
			margin: 0 27px 5px;
		}

		+ .sui-form-field,
		+ .sui-form-field-inline {
			margin-top: 20px;
		}
	}

	// ELEMENT: Error message
	.sui-error-message {
		display: block;
		margin-top: 8px;
		color: $form--input-error-color;
		font-size: $form--input-error-font-size;
		line-height: $form--input-error-line-height;
		font-weight: $form--input-error-font-weight;
	}

	// GROUP: Form field
	.sui-form-field {

		&.sui-input-sm {
			max-width: 80px;
		}
		&.sui-input-md {
			max-width: 240px;
		}

		> .sui-row {

			[class^="sui-col"] {

				@include media(min-width, md) {
					padding-right: 5px;
					padding-left: 5px;
				}
			}

			&:first-child {

				@include media(min-width, md) {
					margin-top: 0;
				}
			}

			@include media(min-width, md) {
				margin-top: 10px;
				margin-right: -5px;
				margin-bottom: 0;
				margin-left: -5px;
			}
		}

		&:last-child {
			margin-bottom: 0;

			@include media( max-width, md ) {
				margin-bottom: 0;
			}
		}

		// STATE: Error
		&.sui-has_error,
		&.sui-form-field-error {

			.sui-form-control {
				border-color: $red;

				&:focus {
					box-shadow: 0 0 0 2px $red-ghost;
				}
			}

			.sui-control-with-icon {

				[class*="sui-icon-"]:before {
					color: $red;
				}
			}
		}

		@include media(max-width, md) {
			margin-bottom: $sui-gutter-md;
		}

		@include media(min-width, md) {
			margin-bottom: $sui-gutter;
		}
	}

	.sui-field-suffix,
	.sui-field-prefix {
		display: inline-block;
		color: #888888;
		font-size: 13px;
		line-height: 22px;
	}

	.sui-field-prefix {
		margin-right: 10px;
	}
	.sui-field-suffix {
		margin-left: 10px;
	}

	// GROUP: Form field (inline)
	.sui-form-field-inline {

		> .sui-form-field,
		> span.sui-select {

			&:first-child {

				@include media(min-width, md) {
					margin-left: 0;
				}
			}

			&:last-child {

				@include media(min-width, md) {
					margin-right: 0;
				}
			}

			@include media(min-width, md) {
				flex: 0 0 auto;
				margin-top: 0;
				margin-bottom: 0;
				margin-right: 10px;
				margin-left: 10px;
			}
		}

		> .sui-form-field {

			@include media(min-width, md) {
				flex: 0 0 auto;
				margin-bottom: 0;
			}
		}

		> p,
		> span,
		> .sui-label {

			@include media(min-width, md) {
				flex: 0 0 auto;
				margin: 0;
			}
		}

		&:last-child {

			@include media(max-width, md) {
				margin-bottom: 0;
			}

			@include media(min-width, md) {
				margin-bottom: 0;
			}
		}

		@include media(min-width, md) {
			display: flex;
			align-items: center;
			margin-bottom: $sui-gutter;
		}

		@include media(max-width, md) {
			margin-bottom: $sui-gutter-md;
		}
	}

	// GROUP: Input with icon
	// This group doesn't work with inline form control
	.sui-control-with-icon {
		position: relative;

		.sui-form-control {
			padding-left: 40px;
		}

		// Select 2
		select.sui-select+.select2-container .select2-selection__rendered {
			padding-left: 40px;
		}

		[class*="sui-icon-"] {
			width: 16px;
			height: 16px;
			pointer-events: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 11px;
			left: 14px;

			&:before {
				color: $form--input-icon;
				display: block;
			}
		}

		&.sui-right-icon {

			.sui-form-control {
				padding-right: 40px;
				padding-left: 14px;
			}

			[class*="sui-icon-"] {
				right: 14px;
				left: auto;
				color: $form--input-icon-right;
			}
		}
	}

	// GROUP: Input with button
	.sui-with-button {
		display: flex;
		align-items: center;

		.sui-button {
			flex: 0 0 auto;
		}

		.sui-form-control {
			flex: 1;
			margin: 0 5px;

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}
		}

		// VARIATION: Inside button
		&.sui-inside,
		&.sui-with-button-inside {
			display: block;
			position: relative;

			.sui-button,
			.sui-button-icon {
				position: absolute;
				top: 5px;
				right: 5px;
			}

			.sui-button-lg {
				top: 0;
				right: 0;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}

			.sui-form-control {
				margin: 0;
				padding-right: 90px;
			}
		}

		// VARIATION: Icon button
		&.sui-with-button-icon {
			display: block;
			position: relative;

			.sui-button,
			.sui-button-icon {
				position: absolute;
				top: 5px;
				right: 5px;
			}

			.sui-button-lg {
				top: 0;
				right: 0;
			}

			.sui-form-control {
				margin: 0;
				padding-right: 40px;
			}
		}
	}

	// GROUP: Inputs
	.sui-input-group {
		width: 100%;
		display: flex;
		align-items: stretch;
		position: relative;
	}

	// GROUP: Password
	.sui-password-group {
		position: relative;

		.sui-password-toggle {
			width: 30px;
			height: 30px;
			cursor: pointer;
			position: absolute;
			top: 50%;
			right: 7px;
			padding: 0;
			border: 0;
			border-radius: $border-radius;
			background: transparent;
			color: $form--input-icon-color;
			font-size: 15px;
			line-height: 1em;
			transform: translateY(-50%);

			&:hover,
			&:focus,
			&:active {
				outline: 0;
			}

			&:hover {
				background-color: rgba(0, 0, 0, .03);

				[class*="sui-icon-"]:before {
					color: $gray;
				}
			}
		}
	}

	// GROUP: Date
	.sui-date {
		position: relative;

		.sui-form-control {

			&:first-child {
				padding-right: 40px;
			}

			&:last-child {
				padding-left: 40px;
			}
		}

		[class*="sui-icon-"] {
			width: 30px;
			height: 30px;
			pointer-events: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 5px;

			&:before {
				display: block;
			}

			&:first-child {
				left: 5px;
			}

			&:last-child {
				right: 5px;
			}
		}
	}

	.sui-multi-date {
		display: flex;
		align-items: center;

		.sui-form-field {
			flex: 1;

			+ button {
				flex: 0 0 auto;
				margin-left: 10px;
			}

			@include media(max-width, md) {
				margin-bottom: 0;
			}

			@include media(min-width, md) {
				margin-bottom: 0;
			}
		}

		&:not(:last-child) {
			margin-bottom: 10px;
		}
	}

	// FIX:
	// Reset height for textarea
	textarea.sui-form-control {
		max-width: 100%;
		height: auto;
		resize: vertical;
		line-height: 20px;
	}

	// FIX:
	// Add special styles if <select> is being used with .sui-form-control class.
	//
	// NOTE: There's no need to use <select> with this class but just in case,
	// a fix for it must be included.
	select.sui-form-control {
		cursor: pointer;
		appearance: none;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAs0lEQVQ4T6WS2w0CIRBF59KA2oklaAdbgpbgB48SIBThduKWYClrA2CGgEEXNWH5moR7Zu48QJ0PnRytA6WUe67svb//clDrUkWt9UxEMYRw/AYzJIS4sd45t0ugMeZERNcY49yCCwRgS0Rna+346rGGAVz4s06aW0gQx2/DUUoNAEYAG86cxezkAWCw1k5lBoupZltThomhEMLhs/fmOgrM2VvQwmq9in8rWncAPWfXXfEJ6RpWD7sJ1JwAAAAASUVORK5CYII=);
		background-repeat: no-repeat;
		background-position: center right 10px;
		line-height: 1;
	}
}