@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../base/mixins";

// Form inline
.rd-form-inline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	@include group( px-to-rem( 20px ), px-to-rem( 15px ) );

	.form-group {
		flex-grow: 1;
	}

	.btn {
		flex-shrink: 0;
		margin-top: 0
	}
}


// Form boxed
.rd-form-boxed {
	position: relative;

	.form-validation {
		right: auto;
		left: px-to-rem( 18px );
	}

	.rd-form-boxed-btn {
		position: absolute;
		top: 50%;
		right: 0;
		margin: 0;
		padding-top: px-to-rem( 5px );
		padding-bottom: px-to-rem( 5px );
		transform: translateY( -50% );
		transition: $transition-base;
		pointer-events: auto;
	}
}

.rd-form-boxed-2 {
	max-width: 521px;

	.form-control {
		padding-right: px-to-rem( 180px );
	}

	.rd-form-boxed-btn {
		right: px-to-rem( 5px );
		height: calc( #{$input-height-lg} - #{px-to-rem( 10px )} );
		padding-top: 0;
		padding-bottom: 0;
	}
}


// Spacing
h4 + .rd-form { margin-top: px-to-rem( 62px * $xs-multiplier ); }
.rd-form + p { margin-top: px-to-rem( 62px * $xs-multiplier ); }

@include media-breakpoint-down( lg ) {
	.rd-form-boxed-2 {
		.form-control {
			padding-right: px-to-rem( 121px );
		}

		.rd-form-boxed-btn {
			padding-left: 11px;
			padding-right: 11px;
		}
	}
}

@include media-breakpoint-up( lg ) {
	h4 + .rd-form { margin-top: px-to-rem( 62px * $lg-multiplier ); }
	.rd-form + p { margin-top: px-to-rem( 62px * $lg-multiplier ); }
}

@include media-breakpoint-up( xxl ) {
	h4 + .rd-form { margin-top: px-to-rem( 62px ); }
	.rd-form + p { margin-top: px-to-rem( 62px ); }
}