.hds-form-input.parsley-success,
.hds-form-select.parsley-success {
    border-color: var(--hds-color-active-green);
}

.hds-form-input.parsley-error,
.hds-form-select.parsley-error {
    border-color: var(--hds-color-nasa-red);
}

.parsley-errors-list {
    /* copying .hds-caption */
    font-family: var(--hds-font-family-public-sans), sans-serif !important;
    font-size: var(--hds-font-size-3xs);
    font-weight: var(--hds-font-weight-normal);
    letter-spacing: var(--hds-letter-spacing-1);
    line-height: var(--hds-line-height-9);
    color: var(--hds-color-nasa-red);
    padding: 0;
    list-style-type: none;
    opacity: 0;
    transition: all .35s ease;
}

.parsley-errors-list.filled {
    opacity: 1;
}

ul.parsley-errors-list.filled > li {
    --error-icon-size: 1.25em;

    position: relative;
    margin-left: calc(var(--error-icon-size) + var(--hds-spacing-1));

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: calc(-1*(var(--error-icon-size) + var(--hds-spacing-1)));
        background-color: var(--hds-color-primary);
        mask: url("/img/hds/Error.svg");
        mask-size: var(--error-icon-size);
        background-repeat: no-repeat;
        height: var(--error-icon-size);
        width: var(--error-icon-size);
    }
}