@use "sass:color";
@use "../../scss/calypso-colors";

// ==========================================================================
// Text Inputs
// ==========================================================================

// This needs the extra specificity to override the default styles.
.dops-text-input.dops-text-input {
	box-sizing: border-box;
	margin: 0;
	padding: 7px 14px;
	width: 100%;
	color: calypso-colors.$gray-dark;
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid color.adjust(calypso-colors.$gray, $lightness: 20%);
	background-color: calypso-colors.$white;
	transition: all 0.15s ease-in-out, box-shadow 0s;
	box-shadow: none;
	-webkit-appearance: none;

	&::placeholder {
		color: calypso-colors.$gray;
	}

	&:focus {
		border-color: color.adjust(calypso-colors.$gray, $lightness: 20%);
		box-shadow: 0 0 0 2px #fff, 0 0 0 4px #069e08;

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

		&.is-valid {
			box-shadow: 0 0 0 2px color.adjust(calypso-colors.$alert-green, $lightness: 35%);

			&:hover {
				box-shadow: 0 0 0 2px color.adjust(calypso-colors.$alert-green, $lightness: 25%);
			}
		}

		&.is-error {
			box-shadow: 0 0 0 2px color.adjust(calypso-colors.$alert-red, $lightness: 35%);

			&:hover {
				box-shadow: 0 0 0 2px color.adjust(calypso-colors.$alert-red, $lightness: 25%);
			}
		}
	}

	&:hover,
	&:focus:hover {
		border-color: color.adjust(calypso-colors.$gray, $lightness: 10%);
	}

	&:disabled {
		background: calypso-colors.$gray-light;
		border-color: color.adjust(calypso-colors.$gray, $lightness: 30%);
		color: color.adjust(calypso-colors.$gray, $lightness: 10%);
		-webkit-text-fill-color: color.adjust(calypso-colors.$gray, $lightness: 10%);

		&:hover {
			cursor: default;
		}

		&::placeholder {
			color: color.adjust(calypso-colors.$gray, $lightness: 10%);
		}
	}

	&.is-valid {
		border-color: calypso-colors.$alert-green;

		&:hover {
			border-color: color.adjust(calypso-colors.$alert-green, $lightness: -10%);
		}
	}


	&.is-error {
		border-color: calypso-colors.$alert-red;

		&:hover {
			border-color: color.adjust(calypso-colors.$alert-red, $lightness: -10%);
		}
	}
}
