@charset "utf-8";
@import (optional, reference) "var.less";
/*validation*/
._valid {
    font-size: var(--_fs-min);
    line-height: 1.5em;
    padding: calc(1em/3) 0;
    display: flex;
    position: relative;
    [class*="_icon-"] {
        font-size: var(--_fs-min);
        margin-right: calc(1em/3);
    }
}
input:where(._c-succ:not([disabled], [type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="reset"])),
textarea:where(._c-succ:not([disabled])),
select:where(._c-succ:not([disabled])) {
    border-color: var(--_c-succ-bd);
    background-color: var(--_c-succ-bg);
    &:hover {
        border-color: var(--_c-succ);
    }
    &:focus {
        color: var(--_c-succ);
        border-color: var(--_c-succ);
        outline-color: var(--_c-succ-sd);
    }
    &::placeholder {
        color: var(--_c-succ-ht);
    }
}
input:where(._c-error:not([disabled], [type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="reset"])),
textarea:where(._c-error:not([disabled])),
select:where(._c-error:not([disabled])) {
    border-color: var(--_c-error-bd);
    background-color: var(--_c-error-bg);
    &:hover {
        border-color: var(--_c-error);
    }
    &:focus {
        color: var(--_c-error);
        border-color: var(--_c-error);
        outline-color: var(--_c-error-sd);
    }
    &::placeholder {
        color: var(--_c-error-ht);
    }
}
