cerebrate/webroot/theme/scss/mixins/_forms-severity.scss

@mixin form-control-validation-severity-state($color) {
    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>"));

    &:focus {
        border-color: $color;
        box-shadow: 0 0 0 $form-select-focus-width rgba($color, .25);
    }
}

@mixin form-select-validation-severity-state($color) {
    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>"));
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

    &:focus {
        box-shadow: 0 0 0 $form-select-focus-width rgba($color, .25);
    }
}

@mixin form-check-input-validation-severity-state($color) {
    & {
        border-color: $color;
    }
    &:checked {
        background-color: $color;
    }
    & ~ .form-check-label {
        color: unset;
    }
    &:focus {
        box-shadow: 0 0 0 0.2rem rgba($color, .25);
    }
}