@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/mixins";

// SASS placeholder selectors for form styles

%form-field {
	margin: 0;
	padding: 7px 14px;
	width: 100%;
	color: var(--color-neutral-70);
	font-size: $font-body;
	line-height: 1.5;
	border: 1px solid var(--color-neutral-10);
	border-radius: 2px;
	background-color: var(--color-surface);
	transition: all 0.15s ease-in-out;
	box-sizing: border-box;

	&::placeholder {
		color: var(--color-neutral-50);
	}

	&:hover {
		border-color: var(--color-neutral-20);
	}

	&:focus {
		border-color: var(--color-primary);
		outline: none;
		box-shadow: 0 0 0 2px var(--color-primary-10);

		&:hover {
			box-shadow: 0 0 0 2px var(--color-primary-20);
		}

		&::-ms-clear {
			display: none;
		}
		&.is-valid {
			box-shadow: 0 0 0 2px var(--color-success-10);
		}

		&.is-valid:hover {
			box-shadow: 0 0 0 2px var(--color-success-20);
		}

		&.is-error {
			box-shadow: 0 0 0 2px var(--color-error-10);
		}

		&.is-error:hover {
			box-shadow: 0 0 0 2px var(--color-error-20);
		}
	}

	&:disabled {
		background: var(--color-neutral-0);
		border-color: var(--color-neutral-0);
		color: var(--color-neutral-20);
		opacity: 1;
		-webkit-text-fill-color: var(--color-neutral-20);

		&:hover {
			cursor: default;
		}

		&::placeholder {
			color: var(--color-neutral-20);
		}
	}

	&.is-valid {
		border-color: var(--color-success);
	}

	&.is-valid:hover {
		border-color: var(--color-success-dark);
	}

	&.is-error {
		border-color: var(--color-error);
	}

	&.is-error:hover {
		border-color: var(--color-error-dark);
	}
}

// Mixin for consistent focus box-shadow, matches the default focus style in input-control.
@mixin form-field-core-styles-focus {
	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
}

%form-field-core-styles {
	@include input-control;

	box-sizing: border-box;
	width: 100%;
	height: $grid-unit-50;
	border-color: var(--color-neutral-10);
	font-size: $font-body-small;
	color: var(--color-neutral-60);

	@include break-small {
		font-size: $font-body-small;
	}

	&:hover:not(:focus, .is-valid, .is-error) {
		border-color: var(--color-neutral-10);
	}

	// The base focus style is included in input-control, but these states are overriden by the default styles above.
	&:focus {
		&:hover,
		&.is-valid,
		&.is-error {
			@include form-field-core-styles-focus;
		}

		// Sass won't output these unless separated.
		&.is-valid:hover,
		&.is-error:hover {
			@include form-field-core-styles-focus;
		}
	}

	&:disabled {
		background-color: var(--wp-components-color-gray-100, #f0f0f0);
		border-color: var(--color-neutral-10);
		color: var(--color-neutral-60);
	}

	&.is-error {
		&:hover {
			border-color: var(--color-error);
		}

		&:focus {
			--wp-admin-theme-color: var(--color-error);
		}
	}

	&.is-valid {
		&:hover {
			border-color: var(--color-success);
		}

		&:focus {
			--wp-admin-theme-color: var(--color-success);
		}
	}
}
