/*
*
* Form styles
*/

// RD Form
.rd-form {
	position: relative;
	text-align: left;

	.button {
		min-height: $form-input-height;
	}
}

* + .rd-form {
	margin-top: 20px;
}

input:-webkit-autofill ~ label,
input:-webkit-autofill ~ .form-validation {
	color: $black !important;
}

//
// Form wrap
//
.form-wrap {
	position: relative;

	&.has-error {
		.form-input {
			border-color: $form-feedback-invalid-color;
		}
	}

	&.has-focus {
		.form-input {
			border-color: $form-feedback-focus-color;
		}
	}
}

// Form wrap offset
.form-wrap + * {
	margin-top: 20px;
}

// Form input
.form-input {
	display: block;
	width: 100%;
	min-height: $form-input-height;
	padding: $form-input-padding-vertical $form-input-padding-horizontal;
	font-size: $form-input-font-size;
	font-weight: $form-input-font-weight;
	line-height: $form-input-line-height;
	color: $form-input-color;
	background-color: $form-input-background;
	background-image: none;
	border-radius: $form-input-border-radius;
	-webkit-appearance: none;
	transition: .3s ease-in-out;
	letter-spacing: 0;

	@if ($form-input-border) {
		border: $form-input-border;
	}

	&:focus {
		outline: 0;
	}
	
	.bg-darkblue-2 & {
		color: $white;
		background-color: rgba($form-input-background, .47);
		border-color: transparent;
	}
	
	.bg-gray-31 & {
		color: $white;
		background-color: $gray-30;
		border-color: $gray-30;
	}
	
	.bg-gray-12 & {
		background-color: $white;
		border-color: $gray-14;
	}

	.form-borderless & {
		border-color: $form-input-background;
	}
}

// Form textarea
textarea.form-input {
	height: $form-textarea-default-height;
	min-height: $form-textarea-default-min-height;
	max-height: $form-textarea-default-max-height;
	resize: vertical;
}

// Form labels
.form-label,
.form-label-outside {
	margin-bottom: 0;
	color: $form-input-color-placeholder;
	font-weight: $form-input-font-weight;
}

.form-label {
	position: absolute;
	top: $form-input-height / 2;
	left: 0;
	right: 0;
	padding-left: $form-input-padding-horizontal;
	padding-right: $form-input-padding-horizontal;
	font-size: $form-input-font-size;
	font-weight: $form-input-font-weight;
	line-height: $form-input-line-height;
	pointer-events: none;
	text-align: left;
	z-index: 9;
	transition: .25s;
	will-change: transform;
	transform: translateY(-50%);

	&.focus {
		opacity: 0;
	}

	&.auto-fill {
		color: $form-input-color;
	}
	
	.bg-gray-31 & {
		color: $white;
	}
	
	.bg-darkblue-2 & {
		color: $white;
	}
}

// Form label out of the field
.form-label-outside {
	width: 100%;
	margin-bottom: 4px;

	@include media-breakpoint-up(md) {
		position: static;

		&,
		&.focus,
		&.auto-fill {
			transform: none;
		}
	}
}

[data-x-mode='true'] {
	.form-label {
		pointer-events: auto;
	}
}

//
// Form validation
//
.form-validation {
	position: absolute;
	right: 8px;
	top: 0;
	z-index: 11;
	margin-top: 2px;
	font-size: 9px;
	font-weight: 400;
	line-height: 12px;
	letter-spacing: 0;
	color: $form-feedback-invalid-color;
	transition: .3s;
}

%context-dark {
  .form-validation {
    color: $white;
  }

	.form-wrap.has-error .form-input {
		border-color: $white;
	}
}

.form-validation-left {
	.form-validation {
		top: 4px;
		left: 14px;
		right: auto;
	}
}

// Form output
#form-output-global {
	position: fixed;
	bottom: 30px;
	left: 15px;
	z-index: 2000;
	visibility: hidden;
	transform: translate3d(-500px, 0, 0);
	transition: .3s all ease;
	max-width: 290px;

	&.active {
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}

	@include media-breakpoint-up(sm) {
		left: 30px;
	}
}

.form-output {
	position: absolute;
	top: 100%;
	left: 0;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.2;
	margin-top: 2px;
	transition: .3s;
	opacity: 0;
	visibility: hidden;

	&.active {
		opacity: 1;
		visibility: visible;
	}

	&.error {
		color: $form-feedback-invalid-color;
	}

	&.success {
		color: $form-feedback-valid-color;
	}
}

//
// Radio and Checkbox Custom
//
.radio .radio-custom,
.radio-inline .radio-custom,
.checkbox .checkbox-custom,
.checkbox-inline .checkbox-custom {
	opacity: 0;

	&, &-dummy {
		position: absolute;
		left: 0;
		width: 14px;
		height: 14px;
		outline: none;
		cursor: pointer;
	}

	&-dummy {
		pointer-events: none;
		background: $white;

		&::after {
			position: absolute;
			opacity: 0;
			transition: .22s;
		}
	}

	&:focus {
		outline: none;
	}
}

.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
	position: relative;
	color: $gray-1;
	cursor: pointer;
	input {
		@include sr-only;
	}
}

%context-dark {
	.radio,
	.radio-inline,
	.checkbox,
	.checkbox-inline {
		color: $white;
	}
}

.radio-custom:checked + .radio-custom-dummy:after,
.checkbox-custom:checked + .checkbox-custom-dummy:after {
	opacity: 1;
}

//
// Custom Radio Styles
//
.radio,
.radio-inline {
	padding-left: 28px;

	.radio-custom-dummy {
		top: 1px;
		left: 0;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid $gray-12;

		&::after {
			content: '';
			top: 3px;
			right: 3px;
			bottom: 3px;
			left: 3px;
			background: $gray-1;
			border-radius: inherit;
		}
	}
}

//
// Custom Checkbox Styles
//
.checkbox,
.checkbox-inline {
	padding-left: 20px;

	.checkbox-custom-dummy {
		top: 2px;
		left: 0;
		width: 15px;
		height: 15px;
		margin: 0;
		background-color: transparent;
		border: 2px solid $gray-15;

		&::after {
			content: '\f222';
			font-family: $mdi;
			position: absolute;
			top: -4px;
			left: -3px;
			font-size: 20px;
			line-height: 18px;
			color: $gray-1;
		}
	}
}

%context-dark {
	.checkbox,
	.checkbox-inline {
		.checkbox-custom-dummy {
			border-color: $lightblue;

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

//
// Checkbox Toggle
//
.toggle-custom {
	padding-left: 60px;
	-webkit-appearance: none;

	&:checked ~ .checkbox-custom-dummy {
		&::after {
			background: $primary;
			transform: translate(20px, -50%);
		}
	}

	& ~ .checkbox-custom-dummy {
		$toggle-height: 20px;

		position: relative;
		display: inline-block;
		margin-top: -1px;
		width: 44px;
		height: $toggle-height;
		background: $form-input-background;
		cursor: pointer;

		&::after {
			content: '';
			position: absolute;
			display: inline-block;
			width: $toggle-height - 4px;
			height: $toggle-height - 4px;
			left: 0;
			top: 50%;
			background: $gray-400;
			transform: translate(4px, -50%);
			opacity: 1;
			transition: .22s;
		}
	}
}

//
// RD Form Inline
//
.rd-form-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	text-align: center;
	@include group(30px, 15px);

	.form-wrap {
		flex: 1 0 50%;
		min-width: 185px;
	}

	.form-wrap-select {
		text-align: left;
	}

	.form-button {
		flex-grow: 1;
		flex-shrink: 0;
		max-width: calc(100% - 10px);
		min-height: $form-input-height;

		.button {
			min-width: 174px;
			min-height: inherit;
		}
	}

	@include media-breakpoint-up(sm) {
		.button {
			display: block;
		}
	}

	&.rd-form-inline-centered {
		justify-content: center;
	}
}

.rd-form-inline-1 {
	display: flex;
	
	.form-wrap {
		flex-grow: 1;
	}
	
	.form-input,
	.form-label {
		color: $white;
	}
	
	.form-input {
		background-color: $gray-27;
		border-color: $gray-27;
	}
	
	.button {
		padding: 14px 15px;
	}
	
	> * {
		margin-top: 0;
	}
}

.rd-mailform-label {
	letter-spacing: .02em;
	* + & {
		margin-top: 15px;
	}
	& + *,
	& + .rd-form {
		margin-top: 15px;
	}
	
		@include media-breakpoint-up(xl) {
		* + & {
			margin-top: 25px;
		}
	} 
}

.bg-gray-31 {
	.rd-mailform-label {
		color: $gray-27;
	}
}

//
// Form Small
//
.form-sm {
	.form-input,
	.button {
		padding-top: 9px;
		padding-bottom: 9px;
		min-height: $form-input-sm-height;
	}

	.form-validation {
		top: -16px;
	}

	.form-label {
		top: $form-input-sm-height / 2;
	}

	* + .button {
		margin-top: 10px;
	}
}

//
// Form Large
//
.form-lg {
	.form-input,
	.form-label,
	.select2-container .select2-choice {
		font-size: 16px;
	}

	.form-input,
	.select2-container .select2-choice {
		font-size: 16px;
		padding-top: round(($form-input-lg-height - $form-input-line-height) / 2) - 1px;
		padding-bottom: round(($form-input-lg-height - $form-input-line-height) / 2) - 1px;
	}

	.form-input,
	.select2-container .select2-choice {
		min-height: $form-input-lg-height - 2px;
	}

	.form-button {
		min-height: $form-input-lg-height;
	}

	.form-label {
		top: round($form-input-lg-height / 2);
	}
}


.rd-form-centered {
	
	.form-label,
	.form-input {
		text-align: center;
	}
	
	.form-label {
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

.rd-mailform {
	* + .button { margin-top: 20px; }
}

.form-wrap-group {
	.select-filter {
		overflow: hidden;
	}
	
	& + * {
		margin-top: 15px;
	}
	
	// Medium ≥576px
	@include media-breakpoint-up(md) {
		
		position: relative;
		display: flex;
		max-width: 100%;
		width: 100%;
		justify-content: space-between;
		
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 17px;
			height: 1px;
			background-color: $gray-14;
		}
		
		.form-wrap {
			margin-top: 0;
			flex-grow: 1;
			width: 50%;
			&:nth-child(1) {
				margin-right: 15px;
			}
			&:nth-child(2) {
				margin-left: 15px;
			}
		}
	}
}

.form-wrap-group-1 {
	margin-right: -13px;
	margin-bottom: -15px;
	.form-wrap {
		display: inline-block;
		min-width: 189px;
		margin-top: 0;
		margin-right: 13px;
		margin-bottom: 15px;
	}
	.form-input {
		text-align: left;
	}
}

.form-wrap-group-2 {
	display: flex;
	flex-wrap: wrap;
	@include group(20px);

	.form-wrap {
		min-width: 175px;
		flex-grow: 1;
	}

	.form-wrap-toggle {
		flex-shrink: 0;
	}
}

* + .form-wrap-group-2 { margin-top: 30px; }

.form-wrap-list {
	span {
		font-family: $font-family-sec;
		color: $primary;
	}
	li {
		+ li {
			margin-top: 8px;
		}
	}
}

.form-select {
	.form-label,
	.form-input {
		letter-spacing: 0;
	}
	
	.form-input {
		border-color: $gray-14;
	}
}

* + .form-select {
	margin-top: 22px;
}

.form-select {
	> * + * {
		margin-top: 15px;
	}
	
	> * + .form-wrap-list {
		margin-top: 25px;
	}
	
	> .form-wrap-list + * {
		margin-top: 30px;
	}
}

.form-property {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -15px;
	margin-left: -10px;
	margin-right: -10px;
	
	button,
	.form-input {
		min-width: 160px;
	}
	
	.form-button {
		order: 1;
	}
	
	> * {
		flex-basis: 100%;
		padding-left: 10px;
		padding-right: 10px;
		margin-top: 0;
		margin-bottom: 15px;
	}
	
	.form-validation {
		padding-right: 10px;
	}
	
		@include media-breakpoint-up(md) {
		> * {
			flex-basis: 50%;
			max-width: 50%;
		}
	}
	
		@include media-breakpoint-up(lg) {
		> * {
			flex-basis: 25%;
			max-width: 25%;
		}
	}
	
		@include media-breakpoint-up(xl) {
		margin-bottom: -28px;
		
		> * {
			flex-basis: 20%;
			max-width: 20%;
			margin-bottom: 28px;
			&:nth-child(1),
			&:nth-child(2) {
				flex-basis: 30%;
				max-width: 30%;
			}
		}
	}
}

//
// Form 1
//
.form-1 {
	.form-input,
	.button {
		padding-top: 8px;
		padding-bottom: 8px;
		min-height: $form-input-sm-height;
	}

	.form-validation {
		top: -1px;
	}

	.form-label {
		top: $form-input-sm-height / 2;
	}

	.form-wrap + * { margin-top: 10px; }

	@include media-breakpoint-up(md) {
		.form-wrap + * { margin-top: 18px; }
	}
}

.ie-10,
.ie-11 {
	.form-1 {
		.form-input,
		.button {
			padding-top: 7px;
			padding-bottom: 9px;
		}
	}
}