/* @import "wqstyle.root.css"; */

/*  -------------------------------
    Options
    - wq-style: Use this attribute to apply all styles.
    - wq-style-validation: Use this attribute to apply styles to validation.
*/

/* -------------------------------
    Validation
*/

:is([wq-style], [wq-style-validation]) {
    & .is-invalid {
        color: red;
    }

    & :is(input, select).is-invalid {
        background-color: #ff000011;
        outline-color: red !important;
    }

    & .validation-show-valid :is(input, select).is-valid {
        background-color: #00ff0011;
        outline-color: green;
    }

    & span.field-validation-error {
        font-size: smaller;
    }
}