//------------------------------------------------------------------------------
// @object: Form
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.3.0
// @description
//
//------------------------------------------------------------------------------

@use 'sass:math';

//
// #settings

// Layout Variables
$form-spacing: $sp1 !default;
$form-height: $default-height !default;
$form-border-size: $default-border-size !default;
$form-border-radius: $default-border-radius !default;
$form-icon-size: $default-icon-md !default;
$form-icon-size: $default-icon-sm !default;
$form-select-icon-size: $default-height !default;
$form-select-icon-position: 12px !default;
$form-select-icon-offset: 20px !default;

// Theme Variables
$form-color: $default-action-color !default;
$form-bg-color: $default-background-color !default;
$form-active-color: $default-action-color-hover !default;
$form-disabled-bg-color: $default-disabled-color !default;
$form-disabled-color: $gray-400 !default;
$form-disabled-active-color: $default-action-bg !default;
$form-invalid-color: $default-error-light-color !default;
$form-invalid-border-color: $default-error-color !default;


//
// #scss

.o-form {
	&-group {
		@include parent();
		background-color: $form-bg-color;
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 97%, $form-active-color 3%);
		background-repeat: no-repeat;
		background-size: 0 100%;
		border-bottom: $form-border-size solid $form-bg-color;
		border-radius: $form-border-radius;
		color: $form-color;
		position: relative;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		margin: 0 0 ($form-spacing * 4);
		padding: 0 ($form-spacing * 1.5) 0 ($form-spacing * 2);
		transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);

		&:focus-within {
			background-size: 100% 100%;
			border-color: $form-active-color;
			outline: none;
			box-shadow: none;
			transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);

			.o-form-floating-label {
				margin: 0 0 ($form-spacing * 4);
			}
		}

		&.is-disabled,
		&.is-readonly {
			background-color: $form-disabled-bg-color;
			border-bottom: $form-border-size solid $form-disabled-bg-color;
			color: $form-disabled-color;
			opacity: 1;

			> [type='text']:disabled,
			> [type='text']:disabled::placeholder,
			> [type='text'][readonly],
			> [type='text'][readonly]::placeholder {
				color: $form-disabled-color;
			}

			&:focus-within {
				background-size: 0% 0%;
				border-color: $form-disabled-bg-color;
			}
		}

		&.is-disabled {
			cursor: not-allowed;
		}

		&.is-invalid {
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 97%, $form-invalid-border-color 3%);
			border-color: $form-invalid-border-color;
			color: $form-invalid-color;
		}
	}

	&-select {
		position: relative;

		&:before {
			@include background-triangle($form-color);
			background-repeat: no-repeat;
			background-position: center $form-select-icon-position;
			position: absolute;
			top: 0;
			right: 0;
			width: $form-select-icon-size;
			height: $form-select-icon-size;
			padding: $form-spacing;
			content: ' ';
			transition: 0.5s;
			pointer-events: none;
		}

		&:hover,
		&:focus {
			&:before {
				@include background-triangle($form-active-color);
				outline: 0;
				color: $form-active-color;
			}
		}
	}

	&-lead {
		@include center($form-height);
		flex-basis: $form-icon-size;
		flex-grow: 0;
		flex-shrink: 1;
		margin: 0 ($form-spacing * 2) 0 0;
	}

	&-prefix {
		@include center($form-height);
		flex-basis: auto;
		flex-grow: 0;
		flex-shrink: 1;
		margin: $form-spacing math.div($form-spacing, 2) 0 0;
	}

	&-input {
		@include type(body1);
		background-color: transparent;
		border: none;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		height: $form-height - $form-spacing;
		margin: $form-spacing 0 0;
		padding: $form-spacing 0 0;

		&:focus {
			background-image: none;
			border: none;
		}

		&-right {
			text-align: right;
			margin-right: 0;
		}
	}

	&-floating-label {
		@include type(caption);
		color: $form-active-color;
		position: absolute;
		bottom: 0;
		top: $form-spacing;
		left: ($form-spacing * 2);
		display: flex;
		flex-basis: auto;
		flex-grow: 0;
		flex-shrink: 1;
		justify-content: center;
		align-items: flex-start;
		margin: 0;
		padding: 0;

		.has-icon & {
			left: ($form-spacing * 7);
		}

		.is-readonly &,
		.is-disabled & {
			color: $form-disabled-active-color;
		}

		.is-invalid > & {
			color: $form-invalid-color;
		}
	}

	&-suffix {
		@include center($form-height);
		flex-basis: auto;
		flex-grow: 0;
		flex-shrink: 1;
		margin: $form-spacing 0 0 0;
	}

	&-trail {
		@include center($form-height);
		flex-basis: $form-icon-size;
		flex-grow: 0;
		flex-shrink: 1;
		margin: 0 0 0 ($form-spacing * 2);

		.is-invalid > & {
			color: $form-invalid-color;
		}
	}

	&-help-text {
		@include type(caption, $lh: 1);
		color: $form-color;
		display: block;
		width: auto;
		margin-top: -($form-spacing * 4);
		padding: $form-spacing $form-spacing ($form-spacing * 1.5);

		.is-invalid ~ & {
			color: $form-invalid-color;
		}
	}
}