.x-field {
  gap: var(--x-field-gap, calc(var(--spacing) * 2));
  display: flex;
  flex-direction: column;

  &:has(:user-invalid) {
    :where(.x-info[hidden]) {
      display: revert;
    }
  }

  &:has([required]) :where(.x-label) {
    &::after {
      color: var(--x-field-required-color, var(--color-error));
      content: " *";
    }
  }
}