@import "../../../../../assets/dev/scss/variables";

@mixin column-width-sizes() {
	&-25 {
		--cool-column-width: 25.2%;
		max-width: calc(var(--cool-column-width) - calc(var(--cool-form-column-gap) / 2));
	}
	&-33 {
		--cool-column-width: 32.2%;
		max-width: calc(var(--cool-column-width) - calc(var(--cool-form-column-gap) / 2));
	}

	&-50 {
		--cool-column-width: 50%;
		max-width: calc(var(--cool-column-width) - var(--cool-form-column-gap) / 2);
	}

	&-100 {
		--cool-column-width: 100%;
		max-width: 100%;
	}
}

.cool-form {
	--cool-column-width: 100%;
	--cool-form-row-gap: 10px;
	--cool-form-column-gap: 10px;
	--cool-form-button-icon-spacing: 8px;
	--cool-form-button-icon-position: row;
	--cool-form-text-container-align: center;
	--cool-form-heading-color: #000;
	--cool-form-description-color: #000;
	--cool-form-label-spacing: 0;
	--cool-form-label-color: #000;
	--cool-form-mark-color: #FF0000;
	--cool-form-field-text-color: #000;
	--cool-form-field-bg-color: #FFF;
	--cool-form-field-border-color: #69727d;
	--cool-form-field-border-width: 1px;
	--cool-form-button-align: stretch;
	--cool-form-button-icon-size: 16px;
	--cool-form-button-icon-spacing: 10px;
	--cool-form-button-text-color: #ffffff;
	--cool-form-button-text-color-hover: #ffffff;
	--cool-form-button-border-width: 1px;
	--cool-form-button-border-color: #69727d;
	--cool-form-button-border-radius: 0;
	--cool-form-button-padding-block-end: 8px;
	--cool-form-button-padding-block-start: 8px;
	--cool-form-button-padding-inline-end: 16px;
	--cool-form-button-padding-inline-start: 16px;
	--cool-form-content-width: 100%;
	--cool-form-box-padding-block-end: 0px;
	--cool-form-box-padding-block-start: 0px;
	--cool-form-box-padding-inline-end: 0px;
	--cool-form-box-padding-inline-start: 0px;

	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block-start: var(--cool-form-box-padding-block-start);
	padding-block-end: var(--cool-form-box-padding-block-end);
	padding-inline-start: var(--cool-form-box-padding-inline-start);
	padding-inline-end: var(--cool-form-box-padding-inline-end);

	& > * {
		max-width: var(--cool-form-content-width);
		width: 100%;
	}

	&__wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: var(--cool-form-row-gap);
		column-gap: var(--cool-form-column-gap);
	}

	&__field-group {
		display: flex;
		flex-direction: column;
		gap: var(--cool-form-label-spacing);

		&.is-field-required.is-mark-required {
			.cool-form__field-label,.mdc-floating-label--required {
			  &::after {
				content: "*";
				color: var(--cool-form-mark-color);
				display: inline-block;
			  }
			}
		}
		
		@mixin set-full-border-radius($radius) {
			.mdc-notched-outline__leading,
			.mdc-notched-outline__notch,
			.mdc-notched-outline__trailing {
			  border-radius: $radius;
			}
		}
		
		@mixin set-horizontal-border-radius-round($left, $right) {
			.mdc-notched-outline__notch{
				.mdc-floating-label{
					left: 15px;
				}
				border-left-width:var(--cool-form-field-border-width);
				border-left-style:solid;
			}
			.mdc-notched-outline__leading,.mdc-notched-outline__notch {
			// .mdc-notched-outline__leading {
			  border-top-left-radius: $left;
			  border-bottom-left-radius: $left;
			}
			.mdc-notched-outline__trailing {
			  border-top-right-radius: $right;
			  border-bottom-right-radius: $right;
			}
		}

		@mixin set-horizontal-border-radius($left, $right) {
			.mdc-notched-outline__leading {
			  border-top-left-radius: $left;
			  border-bottom-left-radius: $left;
			}
			.mdc-notched-outline__trailing {
			  border-top-right-radius: $right;
			  border-bottom-right-radius: $right;
			}
		}
		
		.mdc-text-field,.mdc-select{
			background-color:var(--cool-form-field-bg-color);
		}

		// Shape modifiers
		&.has-shape-sharp {
			.mdc-text-field, .mdc-select {
			  .mdc-notched-outline {
				@include set-full-border-radius($corners-shape-sharp);
			  }
			}
		}
		
		&.has-shape-rounded {
			.mdc-text-field, .mdc-select {
				border-bottom-left-radius: $corners-shape-rounded;
				border-top-left-radius: $corners-shape-rounded;
				border-bottom-right-radius: $corners-shape-rounded;
  				border-top-right-radius: $corners-shape-rounded;
			  .mdc-notched-outline {
				@include set-horizontal-border-radius($corners-shape-rounded, $corners-shape-rounded);
			  }
			}
		}
		
		&.has-shape-round {
			.mdc-notched-outline__leading{
				display: none;
			}
			.mdc-text-field, .mdc-select {
				// border-bottom-left-radius: 14px;
				// border-top-left-radius: 14px;
				border-bottom-left-radius: $corners-shape-round;
				border-top-left-radius: $corners-shape-round;
				border-bottom-right-radius: $corners-shape-round;
  				border-top-right-radius: $corners-shape-round;
			  .mdc-notched-outline {
				@include set-horizontal-border-radius-round($corners-shape-round, $corners-shape-round);
			  }
			}
		}
		
		&.has-shape-default {
			.mdc-text-field, .mdc-select {
			  .mdc-notched-outline {
				@include set-horizontal-border-radius($corners-shape-default, $corners-shape-default);
			  }
			}
		}
		
		.mdc-text-field, .mdc-select {
				.mdc-notched-outline {
					.mdc-notched-outline__leading,
					.mdc-notched-outline__notch,
					.mdc-notched-outline__trailing {
						border-width: var(--cool-form-field-border-width);
						border-color: var(--cool-form-field-border-color);
					}
				}
			}

		.mdc-text-field:not(.mdc-text-field--invalid) {
			.mdc-notched-outline {
				.mdc-notched-outline__leading,
				.mdc-notched-outline__notch,
				.mdc-notched-outline__trailing {
					border-color: var(--cool-form-field-border-color);
				}
			}
		}

	}

	&__field-group select{
		background-color: var(--cool-form-field-bg-color);
		color: var(--cool-form-field-text-color);		
	}
	
	// &__field-group.has-border select{
	// 	border-color: var(--cool-form-field-border-color);
	// 	border-style: solid;
	// 	border-width: var(--cool-form-field-border-width);		
	// }

	&__field-group,
	&__submit-group {
		width: 100%;

		&.has-width {
			@include column-width-sizes();

			&-md {
				@media screen and (max-width: $screen-desktop-min) {
					@include column-width-sizes();
				}
			}

			&-sm {
				@media screen and (max-width: $screen-tablet-min) {
					@include column-width-sizes();
				}
			}
		}
		&.has-width-50,&.has-width-25,&.has-width-33 {
			@media screen and (max-width: 768px) {
				--cool-column-width: 100%;
				max-width: 100%;
			}

			// At screen width 480px or below
			@media screen and (max-width: 480px) {
				--cool-column-width: 100%;
				max-width: 100%;
			}
		}
	}

	&__text-container {
		align-items: var(--cool-form-text-container-align);
		display: flex;
		flex-direction: column;
	}

	&__heading {
		color: var(--cool-form-heading-color);
	}

	&__description {
		color: var(--cool-form-description-color);
	}

	&__field-label {
		color: var(--cool-form-label-color);
	}

	.cool-form-text.mdc-text-field {
		.mdc-floating-label {
		color: var(--cool-form-label-color);
		}
	}
	
	.cool-form__field-group {
		.mdc-form-field {
			label {
				color: var(--cool-form-label-color);
			}
		}		
		.mdc-select {
			.mdc-select__menu{
				ul{
					li span.mdc-list-item__text{
						color:var(--cool-form-label-color);
					}
				}
			}
			.mdc-select__anchor {
				.mdc-notched-outline {
					.mdc-notched-outline__notch {
						.mdc-floating-label {
							color: var(--cool-form-label-color);
						}
					}
				}
			}
		}
	}
	.mdc-text-field:not(.mdc-text-field--disabled){
		.mdc-text-field__input{
			color:var(--cool-form-field-text-color);
		}
	} 
	.cool-field-size-xl{
		min-height: 72px;
	}
	.cool-field-size-lg{
		min-height: 59px;
	}
	.cool-field-size-md{
		min-height: 47px;
	}
	.cool-field-size-xs{
		min-height: 33px;
	}

	&__field:not(.cool-form__select),
	&__field[type="text"],
	&__field[type="email"],
	&__field[type="tel"],
	&__textarea,
	&__select select {
		background-color: var(--cool-form-field-bg-color) !important;
		border: 0;
		border-radius: 0;
		color: var(--cool-form-field-text-color);

		&::placeholder {
			color: var(--cool-form-field-text-color);
		}

		// .has-border & {
		// 	border-color: var(--cool-form-field-border-color);
		// 	border-style: solid;
		// 	border-width: var(--cool-form-field-border-width);
		// }

		.has-shape-sharp & {
			border-radius: $corners-shape-sharp;
		}

		.has-shape-rounded & {
			border-radius: $corners-shape-rounded;
		}

		.has-shape-round & {
			border-radius: $corners-shape-round;
		}

		.has-shape-default & {
			border-radius: $corners-shape-default;
		}
	}

	&__submit-group {
		align-items: flex-end;
		display: flex;
		justify-content: var(--cool-form-button-align);
	}

	&__button[type="submit"] {
		align-items: center;
		border: 0;
		color: var(--cool-form-button-text-color);
		display: flex;
		flex-direction: var(--cool-form-button-icon-position);
		flex-grow: 1;
		justify-content: center;
		gap: var(--cool-form-button-icon-spacing);
		text-decoration: none;
		transition: $transition;

		&:hover,
		&:focus {
			color: var(--cool-form-button-text-color-hover);
			transition: $transition;
		}

		&.has-border {
			border-color: var(--cool-form-button-border-color);
			border-style: solid;
			border-width: var(--cool-form-button-border-width);
			border-radius: var(--cool-form-button-border-radius);
		}

		&.is-type {

			&-button {
				padding-block-end: var(--cool-form-button-padding-block-end);
				padding-block-start: var(--cool-form-button-padding-block-start);
				padding-inline-end: var(--cool-form-button-padding-inline-end);
				padding-inline-start: var(--cool-form-button-padding-inline-start);
				text-decoration: none;
			}

			&-link,
			&-link:not([href]):not([tabindex]) {
				background: none;

				&:hover,
				&:focus {
					background: none;
				}

				.cool-form__button-text {
					text-decoration: underline;
				}
			}
		}

		&.has-shape {

			&-sharp {
				border-radius: $corners-shape-sharp;
			}

			&-rounded {
				border-radius: $corners-shape-rounded;
			}

			&-round {
				border-radius: $corners-shape-round;
			}

			&-default {
				border-radius: $corners-shape-default;
			}
		}
	}

	&__button-icon {
		color: inherit; // inherit the button color
		fill: currentColor; // inherit the button color
		font-size: 1em; // relative to the button font-size
		height: 1em; // relative to the button font-size
		width: 1em; // relative to the button font-size
	}

	&__select {
		position: relative;

		.select-caret-down-wrapper {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			inset-inline-end: 10px;
			pointer-events: none;
			font-size: 11px;

			svg {
				display: unset;
				width: 1em;
				aspect-ratio: unset;
				fill: currentColor;
			}

			i {
				font-size: 19px;
				line-height: 2;
			}
		}

		select {
			appearance: none;

			&::-ms-expand {
				display: none;
			}
		}
	}
}

.cool-form-button-icon{
	svg{
		height:auto;
		width:1em;
	}
} 
