.x-control {
  &:has(:user-invalid) {
    --x-control-background-color: var(--x-control-invalid-background-color, var(--color-error));
    --x-control-background-color-opacity: var(--x-control-invalid-background-color-opacity, 10%);
    --x-control-border-color: var(--x-control-invalid-border-color, var(--color-error));
    --x-control-border-color-opacity: var(--x-control-invalid-border-color-opacity, 100%);
    --x-control-outline-color: var(--x-control-invalid-outline-color, var(--color-error));
    --x-control-color: var(--x-control-invalid-color, var(--color-error));
  }
}