/* The root class of TextInput */
.root {
}

/* The wrapper around the text input, label, leading, and trailing (not helper text) */
.wrapper {
	composes: mdc-text-field from '@material/textfield/dist/mdc.textfield.css';
	display: flex;
}

.defaultKind {
	composes: mdc-text-field--filled from '@material/textfield/dist/mdc.textfield.css';
}

.defaultKind:not(.hasLeading):not(.hasTrailing) .inputWrapper {
	padding-bottom: 7px;
}

.defaultKind.hasLeading .input,
.defaultKind.hasTrailing .input {
	padding-top: 4px;
}

.outlinedKind {
	composes: mdc-text-field--outlined from '@material/textfield/dist/mdc.textfield.css';
}

/* Added to the input */
.input {
	composes: mdc-text-field__input from '@material/textfield/dist/mdc.textfield.css';
	height: 100%;
}

.noLabel {
	composes: mdc-text-field--no-label from '@material/textfield/dist/mdc.textfield.css';
}

/* Added to a disabled TextInput */
.disabled {
	composes: mdc-text-field--disabled from '@material/textfield/dist/mdc.textfield.css';
}

.root .wrapper.defaultKind {
	background-color: var(--mdc-text-input-background);
}

.root .disabled .input {
	color: var(--mdc-secondary-text-color) !important;
}

/* Added to a focused input */
.focused {
	composes: mdc-text-field--focused from '@material/textfield/dist/mdc.textfield.css';
}
/* Added to a read-only input */
.readonly {
}
/* Added to a required input */
.required {
}
/* Added when the contents of the TextInput are invalid */
.invalid {
}
/* Contains leading content */
.leading,
.trailing {
	composes: mdc-text-field__icon from '@material/textfield/dist/mdc.textfield.css';
}
.leading {
	composes: mdc-text-field__icon--leading from '@material/textfield/dist/mdc.textfield.css';
}
.trailing {
	composes: mdc-text-field__icon--trailing from '@material/textfield/dist/mdc.textfield.css';
}
.root .leading,
.root .trailing {
	color: var(--mdc-secondary-text-color);
}

.leading {
	left: 16px;
	right: auto;
}

.trailing {
	right: 12px;
	left: auto;
}

/* Added at the root when there is leading content */
.hasLeading {
	composes: mdc-text-field--with-leading-icon from '@material/textfield/dist/mdc.textfield.css';
}

/* Added at the root when there is trailing content */
.hasTrailing {
	composes: mdc-text-field--with-trailing-icon from '@material/textfield/dist/mdc.textfield.css';
}

/* Styles the input when the input is valid */
.valid .input {
	border-color: var(--success-color);
}

.wrapper:not(.disabled) .input {
	color: var(--mdc-text-color);
}

.wrapper:not(.disabled):not(.focused) .lineRipple:before {
	border-bottom-color: var(--mdc-border-color);
}

.wrapper:not(.disabled):not(.focused) .lineRipple:hover:before {
	border-bottom-color: var(--mdc-border-color-hover);
}

.input::-ms-clear {
	display: none;
}

/*
 * Handle chrome autofill not triggering change event
 * Context: https://github.com/dojo/widgets/issues/1610
 */
@keyframes onAutofillShown {
}
.input:-webkit-autofill {
	animation-name: onAutofillShown;
}

.notchedOutline {
	composes: mdc-notched-outline mdc-notched-outline--upgraded from '@material/textfield/dist/mdc.textfield.css';
}

.notchedOutlineNotched {
	composes: mdc-notched-outline--notched from '@material/textfield/dist/mdc.textfield.css';
}

.notchedOutlineLeading {
	composes: mdc-notched-outline__leading from '@material/textfield/dist/mdc.textfield.css';
}

.notchedOutlineNotch {
	composes: mdc-notched-outline__notch from '@material/textfield/dist/mdc.textfield.css';
}

.notchedOutlineTrailing {
	composes: mdc-notched-outline__trailing from '@material/textfield/dist/mdc.textfield.css';
}

.wrapper.outlinedKind .notchedOutlineLeading,
.wrapper.outlinedKind .notchedOutlineNotch,
.wrapper.outlinedKind .notchedOutlineTrailing,
.wrapper.outlinedKind:not(.disabled):not(.focused):hover .notchedOutlineLeading,
.wrapper.outlinedKind:not(.disabled):not(.focused):hover .notchedOutlineNotch,
.wrapper.outlinedKind:not(.disabled):not(.focused):hover .notchedOutlineTrailing {
	border-color: var(--mdc-border-color);
}

/* Applied to default inputs */
.ripple {
	composes: mdc-text-field__ripple from '@material/textfield/dist/mdc.textfield.css';
}

.lineRipple {
	composes: mdc-line-ripple from '@material/textfield/dist/mdc.textfield.css';
}

.defaultKindFocused {
	composes: mdc-ripple-upgraded--background-focused from '@material/textfield/dist/mdc.textfield.css';
}

.defaultKindLineRippleFocused {
	composes: mdc-line-ripple--active from '@material/textfield/dist/mdc.textfield.css';
}

.outlinedLabelActive {
	transform: translateY(-34.75px) !important;
	font-size: 0.75rem !important;
}
