/* Validation colours are independent of each store's brand palette. */
:root {
    --validation-error-text: #a61b1b;
    --validation-error-border: #d92d20;
}

html[data-theme="dark"] {
    --validation-error-text: #ff9b9e;
    --validation-error-border: #ff7377;
}

.field-validation-error,
.field-validation-error label,
form [data-builder-error]:not(:empty),
.validation-summary-errors,
.validation-summary-errors li {
    color: var(--validation-error-text) !important;
    font-weight: 600;
    line-height: 1.7;
    white-space: normal !important;
}

.field-validation-error:not(:empty),
form [data-builder-error]:not(:empty),
.validation-summary-errors:not(:empty) {
    display: block;
    margin-block-start: .25rem;
    font-size: .8rem;
    text-align: start;
}

.field-validation-error label { margin: 0; font-size: inherit; }

form :is(input, select, textarea).input-validation-error,
form :is(input, select, textarea).error,
form :is(input, select, textarea)[aria-invalid="true"]:not([type="hidden"]) {
    border-color: var(--validation-error-border) !important;
    transition: none !important;
}

form :is(input, select, textarea).input-validation-error:focus-visible,
form :is(input, select, textarea).error:focus-visible,
form :is(input, select, textarea)[aria-invalid="true"]:focus-visible {
    outline: 2px solid var(--validation-error-border) !important;
    outline-offset: 2px;
}

form :is(input, select, textarea).valid,
form :is(input, select, textarea)[aria-invalid="false"] {
    transition: none !important;
}

form select.input-validation-error + .select2-container .select2-selection,
form select.error + .select2-container .select2-selection,
form select[aria-invalid="true"] + .select2-container .select2-selection {
    border-color: var(--validation-error-border) !important;
    transition: none !important;
}

form select.input-validation-error + .select2-container--focus .select2-selection,
form select.error + .select2-container--focus .select2-selection,
form select[aria-invalid="true"] + .select2-container--focus .select2-selection {
    outline: 2px solid var(--validation-error-border) !important;
    outline-offset: 2px;
}

form select.valid + .select2-container .select2-selection,
form select[aria-invalid="false"] + .select2-container .select2-selection {
    transition: none !important;
}