flyonui/components/validation.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.validate :valid~.success-message,.validate :has(:valid)~.success-message,.validate :invalid~.error-message,.validate :has(:invalid)~.error-message{display:block}.input,.select,.textarea{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){border-color:var(--color-success);&:hover{@media (hover:hover){border-color:var(--color-success)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-success)}&:focus,&:focus-within{--input-color:var(--color-success)}}}.input,.select,.textarea{&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){border-color:var(--color-error);&:hover{@media (hover:hover){border-color:var(--color-error)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-error)}&:focus,&:focus-within{--input-color:var(--color-error)}}}.switch,.checkbox,.radio,.radio-inset{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){--input-color:var(--color-success);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-success)}}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){--input-color:var(--color-error);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-error)}}}.checkbox{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){color:var(--color-success-content)}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){color:var(--color-error-content)}}.custom-option,.custom-soft-option{.validate &:has(:valid),&:has(.is-valid){--input-color:var(--color-success)}.validate &:has(:invalid),&:has(.is-invalid){--input-color:var(--color-error)}}.input.is-valid::file-selector-button,.validate .input:valid::file-selector-button{background-color:var(--color-success);color:var(--color-success-content);--input-color:var(--color-success)}.input.is-invalid::file-selector-button,.validate .input:invalid::file-selector-button{background-color:var(--color-error);color:var(--color-error-content);--input-color:var(--color-error)}.input-floating>.input.is-valid::file-selector-button,.validate .input-floating>.input:valid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-success)}.input-floating>.input.is-invalid::file-selector-button,.validate .input-floating>.input:invalid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-error)}.label-text:has(~.is-valid),.label-text:has(~* .is-valid),.validate .label-text:has(~:valid),.validate .label-text:has(~* :valid),.is-valid~.helper-text,:has(.is-valid)~.helper-text,.validate :valid~.helper-text,.validate :has(:valid)~.helper-text,.is-valid~.label-text,.is-valid~.label-text *,.is-valid~*>.label-text,.validate :valid~.label-text,.validate :valid~.label-text *,.validate :valid~*>.label-text{color:var(--color-success)}.label-text:has(~.is-invalid),.label-text:has(~* .is-invalid),.validate .label-text:has(~:invalid),.validate .label-text:has(~* :invalid),.is-invalid~.helper-text,:has(.is-invalid)~.helper-text,.validate :invalid~.helper-text,.validate :has(:invalid)~.helper-text,.is-invalid~.label-text,.is-invalid~.label-text *,.is-invalid~*>.label-text,.validate :invalid~.label-text,.validate :invalid~.label-text *,.validate :invalid~*>.label-text{color:var(--color-error)}select.is-valid+.advance-select-toggle,.advance-select-tag:has(>.is-valid),.validate select:has(~*>.selected)+.advance-select-toggle{--input-color:var(--color-success);&:focus,&:focus-within{--input-color:var(--color-success)}}select.is-invalid+.advance-select-toggle,.advance-select-tag:has(>.is-invalid),.validate select:not(:has(~*>.selected))+.advance-select-toggle{--input-color:var(--color-error);&:focus,&:focus-within{--input-color:var(--color-error)}}.input-floating:has(.is-valid),.validate .input-floating:has(:valid){&:hover{@media (hover:hover){border-color:var(--color-success)}}& .input-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-success)}}}.input-floating:has(.is-invalid),.validate .input-floating:has(:invalid){&:hover{@media (hover:hover){border-color:var(--color-error)}}& .input-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-error)}}}.textarea-floating:has(.is-valid),.validate .textarea-floating:has(:valid){& .textarea-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-success)}}}.textarea-floating:has(.is-invalid),.validate .textarea-floating:has(:invalid){& .textarea-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-error)}}}.select-floating:has(.is-valid),.validate .select-floating:has(:valid){& .select-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-success)}}}.select-floating:has(.is-invalid),.validate .select-floating:has(:invalid){& .select-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-error)}}}@media (width>=640px){.sm\:validate :valid~.success-message,.sm\:validate :has(:valid)~.success-message,.sm\:validate :invalid~.error-message,.sm\:validate :has(:invalid)~.error-message{display:block}.sm\:input,.sm\:select,.sm\:textarea{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){border-color:var(--color-success);&:hover{@media (hover:hover){border-color:var(--color-success)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-success)}&:focus,&:focus-within{--input-color:var(--color-success)}}}.sm\:input,.sm\:select,.sm\:textarea{&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){border-color:var(--color-error);&:hover{@media (hover:hover){border-color:var(--color-error)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-error)}&:focus,&:focus-within{--input-color:var(--color-error)}}}.sm\:switch,.sm\:checkbox,.sm\:radio,.sm\:radio-inset{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){--input-color:var(--color-success);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-success)}}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){--input-color:var(--color-error);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-error)}}}.sm\:checkbox{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){color:var(--color-success-content)}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){color:var(--color-error-content)}}.sm\:custom-option,.sm\:custom-soft-option{.validate &:has(:valid),&:has(.is-valid){--input-color:var(--color-success)}.validate &:has(:invalid),&:has(.is-invalid){--input-color:var(--color-error)}}.sm\:input.is-valid::file-selector-button,.sm\:validate .input:valid::file-selector-button{background-color:var(--color-success);color:var(--color-success-content);--input-color:var(--color-success)}.sm\:input.is-invalid::file-selector-button,.sm\:validate .input:invalid::file-selector-button{background-color:var(--color-error);color:var(--color-error-content);--input-color:var(--color-error)}.sm\:input-floating>.input.is-valid::file-selector-button,.sm\:validate .input-floating>.input:valid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-success)}.sm\:input-floating>.input.is-invalid::file-selector-button,.sm\:validate .input-floating>.input:invalid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-error)}.sm\:label-text:has(~.is-valid),.sm\:label-text:has(~* .is-valid),.sm\:validate .label-text:has(~:valid),.sm\:validate .label-text:has(~* :valid),.is-valid~.helper-text,:has(.is-valid)~.helper-text,.sm\:validate :valid~.helper-text,.sm\:validate :has(:valid)~.helper-text,.is-valid~.label-text,.is-valid~.label-text *,.is-valid~*>.label-text,.sm\:validate :valid~.label-text,.sm\:validate :valid~.label-text *,.sm\:validate :valid~*>.label-text{color:var(--color-success)}.sm\:label-text:has(~.is-invalid),.sm\:label-text:has(~* .is-invalid),.sm\:validate .label-text:has(~:invalid),.sm\:validate .label-text:has(~* :invalid),.is-invalid~.helper-text,:has(.is-invalid)~.helper-text,.sm\:validate :invalid~.helper-text,.sm\:validate :has(:invalid)~.helper-text,.is-invalid~.label-text,.is-invalid~.label-text *,.is-invalid~*>.label-text,.sm\:validate :invalid~.label-text,.sm\:validate :invalid~.label-text *,.sm\:validate :invalid~*>.label-text{color:var(--color-error)}select.is-valid+.advance-select-toggle,.sm\:advance-select-tag:has(>.is-valid),.sm\:validate select:has(~*>.selected)+.advance-select-toggle{--input-color:var(--color-success);&:focus,&:focus-within{--input-color:var(--color-success)}}select.is-invalid+.advance-select-toggle,.sm\:advance-select-tag:has(>.is-invalid),.sm\:validate select:not(:has(~*>.selected))+.advance-select-toggle{--input-color:var(--color-error);&:focus,&:focus-within{--input-color:var(--color-error)}}.sm\:input-floating:has(.is-valid),.sm\:validate .input-floating:has(:valid){&:hover{@media (hover:hover){border-color:var(--color-success)}}& .input-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-success)}}}.sm\:input-floating:has(.is-invalid),.sm\:validate .input-floating:has(:invalid){&:hover{@media (hover:hover){border-color:var(--color-error)}}& .input-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-error)}}}.sm\:textarea-floating:has(.is-valid),.sm\:validate .textarea-floating:has(:valid){& .textarea-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-success)}}}.sm\:textarea-floating:has(.is-invalid),.sm\:validate .textarea-floating:has(:invalid){& .textarea-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-error)}}}.sm\:select-floating:has(.is-valid),.sm\:validate .select-floating:has(:valid){& .select-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-success)}}}.sm\:select-floating:has(.is-invalid),.sm\:validate .select-floating:has(:invalid){& .select-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-error)}}}}@media (width>=768px){.md\:validate :valid~.success-message,.md\:validate :has(:valid)~.success-message,.md\:validate :invalid~.error-message,.md\:validate :has(:invalid)~.error-message{display:block}.md\:input,.md\:select,.md\:textarea{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){border-color:var(--color-success);&:hover{@media (hover:hover){border-color:var(--color-success)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-success)}&:focus,&:focus-within{--input-color:var(--color-success)}}}.md\:input,.md\:select,.md\:textarea{&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){border-color:var(--color-error);&:hover{@media (hover:hover){border-color:var(--color-error)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-error)}&:focus,&:focus-within{--input-color:var(--color-error)}}}.md\:switch,.md\:checkbox,.md\:radio,.md\:radio-inset{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){--input-color:var(--color-success);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-success)}}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){--input-color:var(--color-error);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-error)}}}.md\:checkbox{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){color:var(--color-success-content)}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){color:var(--color-error-content)}}.md\:custom-option,.md\:custom-soft-option{.validate &:has(:valid),&:has(.is-valid){--input-color:var(--color-success)}.validate &:has(:invalid),&:has(.is-invalid){--input-color:var(--color-error)}}.md\:input.is-valid::file-selector-button,.md\:validate .input:valid::file-selector-button{background-color:var(--color-success);color:var(--color-success-content);--input-color:var(--color-success)}.md\:input.is-invalid::file-selector-button,.md\:validate .input:invalid::file-selector-button{background-color:var(--color-error);color:var(--color-error-content);--input-color:var(--color-error)}.md\:input-floating>.input.is-valid::file-selector-button,.md\:validate .input-floating>.input:valid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-success)}.md\:input-floating>.input.is-invalid::file-selector-button,.md\:validate .input-floating>.input:invalid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-error)}.md\:label-text:has(~.is-valid),.md\:label-text:has(~* .is-valid),.md\:validate .label-text:has(~:valid),.md\:validate .label-text:has(~* :valid),.is-valid~.helper-text,:has(.is-valid)~.helper-text,.md\:validate :valid~.helper-text,.md\:validate :has(:valid)~.helper-text,.is-valid~.label-text,.is-valid~.label-text *,.is-valid~*>.label-text,.md\:validate :valid~.label-text,.md\:validate :valid~.label-text *,.md\:validate :valid~*>.label-text{color:var(--color-success)}.md\:label-text:has(~.is-invalid),.md\:label-text:has(~* .is-invalid),.md\:validate .label-text:has(~:invalid),.md\:validate .label-text:has(~* :invalid),.is-invalid~.helper-text,:has(.is-invalid)~.helper-text,.md\:validate :invalid~.helper-text,.md\:validate :has(:invalid)~.helper-text,.is-invalid~.label-text,.is-invalid~.label-text *,.is-invalid~*>.label-text,.md\:validate :invalid~.label-text,.md\:validate :invalid~.label-text *,.md\:validate :invalid~*>.label-text{color:var(--color-error)}select.is-valid+.advance-select-toggle,.md\:advance-select-tag:has(>.is-valid),.md\:validate select:has(~*>.selected)+.advance-select-toggle{--input-color:var(--color-success);&:focus,&:focus-within{--input-color:var(--color-success)}}select.is-invalid+.advance-select-toggle,.md\:advance-select-tag:has(>.is-invalid),.md\:validate select:not(:has(~*>.selected))+.advance-select-toggle{--input-color:var(--color-error);&:focus,&:focus-within{--input-color:var(--color-error)}}.md\:input-floating:has(.is-valid),.md\:validate .input-floating:has(:valid){&:hover{@media (hover:hover){border-color:var(--color-success)}}& .input-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-success)}}}.md\:input-floating:has(.is-invalid),.md\:validate .input-floating:has(:invalid){&:hover{@media (hover:hover){border-color:var(--color-error)}}& .input-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-error)}}}.md\:textarea-floating:has(.is-valid),.md\:validate .textarea-floating:has(:valid){& .textarea-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-success)}}}.md\:textarea-floating:has(.is-invalid),.md\:validate .textarea-floating:has(:invalid){& .textarea-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-error)}}}.md\:select-floating:has(.is-valid),.md\:validate .select-floating:has(:valid){& .select-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-success)}}}.md\:select-floating:has(.is-invalid),.md\:validate .select-floating:has(:invalid){& .select-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-error)}}}}@media (width>=1024px){.lg\:validate :valid~.success-message,.lg\:validate :has(:valid)~.success-message,.lg\:validate :invalid~.error-message,.lg\:validate :has(:invalid)~.error-message{display:block}.lg\:input,.lg\:select,.lg\:textarea{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){border-color:var(--color-success);&:hover{@media (hover:hover){border-color:var(--color-success)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-success)}&:focus,&:focus-within{--input-color:var(--color-success)}}}.lg\:input,.lg\:select,.lg\:textarea{&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){border-color:var(--color-error);&:hover{@media (hover:hover){border-color:var(--color-error)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-error)}&:focus,&:focus-within{--input-color:var(--color-error)}}}.lg\:switch,.lg\:checkbox,.lg\:radio,.lg\:radio-inset{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){--input-color:var(--color-success);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-success)}}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){--input-color:var(--color-error);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-error)}}}.lg\:checkbox{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){color:var(--color-success-content)}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){color:var(--color-error-content)}}.lg\:custom-option,.lg\:custom-soft-option{.validate &:has(:valid),&:has(.is-valid){--input-color:var(--color-success)}.validate &:has(:invalid),&:has(.is-invalid){--input-color:var(--color-error)}}.lg\:input.is-valid::file-selector-button,.lg\:validate .input:valid::file-selector-button{background-color:var(--color-success);color:var(--color-success-content);--input-color:var(--color-success)}.lg\:input.is-invalid::file-selector-button,.lg\:validate .input:invalid::file-selector-button{background-color:var(--color-error);color:var(--color-error-content);--input-color:var(--color-error)}.lg\:input-floating>.input.is-valid::file-selector-button,.lg\:validate .input-floating>.input:valid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-success)}.lg\:input-floating>.input.is-invalid::file-selector-button,.lg\:validate .input-floating>.input:invalid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-error)}.lg\:label-text:has(~.is-valid),.lg\:label-text:has(~* .is-valid),.lg\:validate .label-text:has(~:valid),.lg\:validate .label-text:has(~* :valid),.is-valid~.helper-text,:has(.is-valid)~.helper-text,.lg\:validate :valid~.helper-text,.lg\:validate :has(:valid)~.helper-text,.is-valid~.label-text,.is-valid~.label-text *,.is-valid~*>.label-text,.lg\:validate :valid~.label-text,.lg\:validate :valid~.label-text *,.lg\:validate :valid~*>.label-text{color:var(--color-success)}.lg\:label-text:has(~.is-invalid),.lg\:label-text:has(~* .is-invalid),.lg\:validate .label-text:has(~:invalid),.lg\:validate .label-text:has(~* :invalid),.is-invalid~.helper-text,:has(.is-invalid)~.helper-text,.lg\:validate :invalid~.helper-text,.lg\:validate :has(:invalid)~.helper-text,.is-invalid~.label-text,.is-invalid~.label-text *,.is-invalid~*>.label-text,.lg\:validate :invalid~.label-text,.lg\:validate :invalid~.label-text *,.lg\:validate :invalid~*>.label-text{color:var(--color-error)}select.is-valid+.advance-select-toggle,.lg\:advance-select-tag:has(>.is-valid),.lg\:validate select:has(~*>.selected)+.advance-select-toggle{--input-color:var(--color-success);&:focus,&:focus-within{--input-color:var(--color-success)}}select.is-invalid+.advance-select-toggle,.lg\:advance-select-tag:has(>.is-invalid),.lg\:validate select:not(:has(~*>.selected))+.advance-select-toggle{--input-color:var(--color-error);&:focus,&:focus-within{--input-color:var(--color-error)}}.lg\:input-floating:has(.is-valid),.lg\:validate .input-floating:has(:valid){&:hover{@media (hover:hover){border-color:var(--color-success)}}& .input-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-success)}}}.lg\:input-floating:has(.is-invalid),.lg\:validate .input-floating:has(:invalid){&:hover{@media (hover:hover){border-color:var(--color-error)}}& .input-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-error)}}}.lg\:textarea-floating:has(.is-valid),.lg\:validate .textarea-floating:has(:valid){& .textarea-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-success)}}}.lg\:textarea-floating:has(.is-invalid),.lg\:validate .textarea-floating:has(:invalid){& .textarea-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-error)}}}.lg\:select-floating:has(.is-valid),.lg\:validate .select-floating:has(:valid){& .select-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-success)}}}.lg\:select-floating:has(.is-invalid),.lg\:validate .select-floating:has(:invalid){& .select-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-error)}}}}@media (width>=1280px){.xl\:validate :valid~.success-message,.xl\:validate :has(:valid)~.success-message,.xl\:validate :invalid~.error-message,.xl\:validate :has(:invalid)~.error-message{display:block}.xl\:input,.xl\:select,.xl\:textarea{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){border-color:var(--color-success);&:hover{@media (hover:hover){border-color:var(--color-success)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-success)}&:focus,&:focus-within{--input-color:var(--color-success)}}}.xl\:input,.xl\:select,.xl\:textarea{&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){border-color:var(--color-error);&:hover{@media (hover:hover){border-color:var(--color-error)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-error)}&:focus,&:focus-within{--input-color:var(--color-error)}}}.xl\:switch,.xl\:checkbox,.xl\:radio,.xl\:radio-inset{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){--input-color:var(--color-success);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-success)}}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){--input-color:var(--color-error);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-error)}}}.xl\:checkbox{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){color:var(--color-success-content)}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){color:var(--color-error-content)}}.xl\:custom-option,.xl\:custom-soft-option{.validate &:has(:valid),&:has(.is-valid){--input-color:var(--color-success)}.validate &:has(:invalid),&:has(.is-invalid){--input-color:var(--color-error)}}.xl\:input.is-valid::file-selector-button,.xl\:validate .input:valid::file-selector-button{background-color:var(--color-success);color:var(--color-success-content);--input-color:var(--color-success)}.xl\:input.is-invalid::file-selector-button,.xl\:validate .input:invalid::file-selector-button{background-color:var(--color-error);color:var(--color-error-content);--input-color:var(--color-error)}.xl\:input-floating>.input.is-valid::file-selector-button,.xl\:validate .input-floating>.input:valid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-success)}.xl\:input-floating>.input.is-invalid::file-selector-button,.xl\:validate .input-floating>.input:invalid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-error)}.xl\:label-text:has(~.is-valid),.xl\:label-text:has(~* .is-valid),.xl\:validate .label-text:has(~:valid),.xl\:validate .label-text:has(~* :valid),.is-valid~.helper-text,:has(.is-valid)~.helper-text,.xl\:validate :valid~.helper-text,.xl\:validate :has(:valid)~.helper-text,.is-valid~.label-text,.is-valid~.label-text *,.is-valid~*>.label-text,.xl\:validate :valid~.label-text,.xl\:validate :valid~.label-text *,.xl\:validate :valid~*>.label-text{color:var(--color-success)}.xl\:label-text:has(~.is-invalid),.xl\:label-text:has(~* .is-invalid),.xl\:validate .label-text:has(~:invalid),.xl\:validate .label-text:has(~* :invalid),.is-invalid~.helper-text,:has(.is-invalid)~.helper-text,.xl\:validate :invalid~.helper-text,.xl\:validate :has(:invalid)~.helper-text,.is-invalid~.label-text,.is-invalid~.label-text *,.is-invalid~*>.label-text,.xl\:validate :invalid~.label-text,.xl\:validate :invalid~.label-text *,.xl\:validate :invalid~*>.label-text{color:var(--color-error)}select.is-valid+.advance-select-toggle,.xl\:advance-select-tag:has(>.is-valid),.xl\:validate select:has(~*>.selected)+.advance-select-toggle{--input-color:var(--color-success);&:focus,&:focus-within{--input-color:var(--color-success)}}select.is-invalid+.advance-select-toggle,.xl\:advance-select-tag:has(>.is-invalid),.xl\:validate select:not(:has(~*>.selected))+.advance-select-toggle{--input-color:var(--color-error);&:focus,&:focus-within{--input-color:var(--color-error)}}.xl\:input-floating:has(.is-valid),.xl\:validate .input-floating:has(:valid){&:hover{@media (hover:hover){border-color:var(--color-success)}}& .input-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-success)}}}.xl\:input-floating:has(.is-invalid),.xl\:validate .input-floating:has(:invalid){&:hover{@media (hover:hover){border-color:var(--color-error)}}& .input-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-error)}}}.xl\:textarea-floating:has(.is-valid),.xl\:validate .textarea-floating:has(:valid){& .textarea-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-success)}}}.xl\:textarea-floating:has(.is-invalid),.xl\:validate .textarea-floating:has(:invalid){& .textarea-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-error)}}}.xl\:select-floating:has(.is-valid),.xl\:validate .select-floating:has(:valid){& .select-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-success)}}}.xl\:select-floating:has(.is-invalid),.xl\:validate .select-floating:has(:invalid){& .select-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-error)}}}}@media (width>=1536px){.\32 xl\:validate :valid~.success-message,.\32 xl\:validate :has(:valid)~.success-message,.\32 xl\:validate :invalid~.error-message,.\32 xl\:validate :has(:invalid)~.error-message{display:block}.\32 xl\:input,.\32 xl\:select,.\32 xl\:textarea{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){border-color:var(--color-success);&:hover{@media (hover:hover){border-color:var(--color-success)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-success)}&:focus,&:focus-within{--input-color:var(--color-success)}}}.\32 xl\:input,.\32 xl\:select,.\32 xl\:textarea{&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){border-color:var(--color-error);&:hover{@media (hover:hover){border-color:var(--color-error)}}&:has(:hover):not(:focus,:focus-within){border-color:var(--color-error)}&:focus,&:focus-within{--input-color:var(--color-error)}}}.\32 xl\:switch,.\32 xl\:checkbox,.\32 xl\:radio,.\32 xl\:radio-inset{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){--input-color:var(--color-success);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-success)}}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){--input-color:var(--color-error);border-color:var(--input-color);&:checked,&[aria-checked=true],&:has(>input:checked){--input-color:var(--color-error)}}}.\32 xl\:checkbox{&.is-valid,&:has(.is-valid),.validate &:valid,.validate &:has(:valid){color:var(--color-success-content)}&.is-invalid,&:has(.is-invalid),.validate &:invalid,.validate &:has(:invalid){color:var(--color-error-content)}}.\32 xl\:custom-option,.\32 xl\:custom-soft-option{.validate &:has(:valid),&:has(.is-valid){--input-color:var(--color-success)}.validate &:has(:invalid),&:has(.is-invalid){--input-color:var(--color-error)}}.\32 xl\:input.is-valid::file-selector-button,.\32 xl\:validate .input:valid::file-selector-button{background-color:var(--color-success);color:var(--color-success-content);--input-color:var(--color-success)}.\32 xl\:input.is-invalid::file-selector-button,.\32 xl\:validate .input:invalid::file-selector-button{background-color:var(--color-error);color:var(--color-error-content);--input-color:var(--color-error)}.\32 xl\:input-floating>.input.is-valid::file-selector-button,.\32 xl\:validate .input-floating>.input:valid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-success)}.\32 xl\:input-floating>.input.is-invalid::file-selector-button,.\32 xl\:validate .input-floating>.input:invalid::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid var(--color-error)}.\32 xl\:label-text:has(~.is-valid),.\32 xl\:label-text:has(~* .is-valid),.\32 xl\:validate .label-text:has(~:valid),.\32 xl\:validate .label-text:has(~* :valid),.is-valid~.helper-text,:has(.is-valid)~.helper-text,.\32 xl\:validate :valid~.helper-text,.\32 xl\:validate :has(:valid)~.helper-text,.is-valid~.label-text,.is-valid~.label-text *,.is-valid~*>.label-text,.\32 xl\:validate :valid~.label-text,.\32 xl\:validate :valid~.label-text *,.\32 xl\:validate :valid~*>.label-text{color:var(--color-success)}.\32 xl\:label-text:has(~.is-invalid),.\32 xl\:label-text:has(~* .is-invalid),.\32 xl\:validate .label-text:has(~:invalid),.\32 xl\:validate .label-text:has(~* :invalid),.is-invalid~.helper-text,:has(.is-invalid)~.helper-text,.\32 xl\:validate :invalid~.helper-text,.\32 xl\:validate :has(:invalid)~.helper-text,.is-invalid~.label-text,.is-invalid~.label-text *,.is-invalid~*>.label-text,.\32 xl\:validate :invalid~.label-text,.\32 xl\:validate :invalid~.label-text *,.\32 xl\:validate :invalid~*>.label-text{color:var(--color-error)}select.is-valid+.advance-select-toggle,.\32 xl\:advance-select-tag:has(>.is-valid),.\32 xl\:validate select:has(~*>.selected)+.advance-select-toggle{--input-color:var(--color-success);&:focus,&:focus-within{--input-color:var(--color-success)}}select.is-invalid+.advance-select-toggle,.\32 xl\:advance-select-tag:has(>.is-invalid),.\32 xl\:validate select:not(:has(~*>.selected))+.advance-select-toggle{--input-color:var(--color-error);&:focus,&:focus-within{--input-color:var(--color-error)}}.\32 xl\:input-floating:has(.is-valid),.\32 xl\:validate .input-floating:has(:valid){&:hover{@media (hover:hover){border-color:var(--color-success)}}& .input-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-success)}}}.\32 xl\:input-floating:has(.is-invalid),.\32 xl\:validate .input-floating:has(:invalid){&:hover{@media (hover:hover){border-color:var(--color-error)}}& .input-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(input:placeholder-shown)),&:has(.input:focus){& .input-floating-label{color:var(--color-error)}}}.\32 xl\:textarea-floating:has(.is-valid),.\32 xl\:validate .textarea-floating:has(:valid){& .textarea-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-success)}}}.\32 xl\:textarea-floating:has(.is-invalid),.\32 xl\:validate .textarea-floating:has(:invalid){& .textarea-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{color:var(--color-error)}}}.\32 xl\:select-floating:has(.is-valid),.\32 xl\:validate .select-floating:has(:valid){& .select-floating-label{color:var(--color-success)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-success)}}}.\32 xl\:select-floating:has(.is-invalid),.\32 xl\:validate .select-floating:has(:invalid){& .select-floating-label{color:var(--color-error)}&:focus-within,&:not(:has(select:placeholder-shown)),&:has(.select:focus){& .select-floating-label{color:var(--color-error)}}}}}