@import '../../../../constants/colors.scss';

$input-color: $primary-black;
$input-button-color: $primary-white;
$button-background-color: $primary-violet;
$button-background-color-box: $primary-violet;
$button-hover-color: $primary-violet;
$li-colors: ($primary-white);
$li-colors-box: ($primary-green);
$input-width: 100%;
$input-height: 80px;
$input-padding: 0px;
$button-border: none;

.form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: end;
	.wrapper {
		position: relative;
		transform: skewY(-1deg);
		width: 100%;

		input {
			padding-left: 3%;
		}

		li,
		button,
		.blurred {
			position: relative;
			list-style: none;
			margin-bottom: 4px;
			z-index: var(--i);
			transition: 0.3s;
			border-radius: 4px;
			color: $input-button-color;
		}

		.blurred {
			width: $input-width;
		}

		li::before,
		button::before {
			position: absolute;
			content: '';
			background: $button-background-color-box;
			top: 0;
			left: -30px;
			width: 20px;
			height: 40px;
			transform-origin: right;
			transform: skewY(25deg);
			transition: 0.3s;
			filter: blur(25px);
		}

		li::after,
		button::after {
			position: absolute;
			content: '';
			background: $button-background-color-box;
			width: $input-width;
			height: 40px;
			top: -30px;
			left: 0;
			z-index: -1;
			transform-origin: bottom;
			transform: skewX(45deg);
			transition: 0.3s;
			filter: blur(25px);
		}

		@for $i from 1 through length($li-colors) {
			$color: nth($li-colors, $i);

			li:nth-child(#{$i})::after,
			li:nth-child(#{$i})::before,
			.blurred:nth-child(#{$i})::after,
			.blurred:nth-child(#{$i})::before {
				background-color: $li-colors-box;
			}

			li:nth-child(#{$i}) .input {
				background: $color;
			}

			li:nth-child(#{$i}) .input:focus {
				outline: none;
				border: 3.5px solid $li-colors-box;
			}
		}

		li:hover,
		button:hover,
		.blurred:hover {
			transform: translateX(-20px);
		}

		button:hover,
		button:hover::before,
		button:hover::after,
		.blurred:hover,
		.blurred:hover::before,
		.blurred:hover::after {
			background: $button-hover-color;
		}

		button:active,
		.blurred:active {
			transform: translateX(0px);
		}
	}

	.input,
	button,
	.blurred {
		width: $input-width;
		height: $input-height;
		position: relative;
		padding: $input-padding;
		border: none;
	}

	button,
	.blurred {
		background: $button-background-color;
		border: $button-border;
		width: 103%;
	}

	li .input,
	.blurred {
		outline: none;
		border: none;
		color: $input-color;
		border-radius: 4px;
		&::placeholder {
			color: $input-color;
		}
	}
}
