@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * FORM FIELD
 * ======================================== */

  .cinder-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1-5);
    inline-size: 100%;
  }

  /* ----------------------------------------
 * Label
 * ---------------------------------------- */

  .cinder-form-field__label {
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1);
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-medium);
    line-height: 1;
    color: var(--cinder-text-default);
  }

  .cinder-form-field__label[data-disabled] {
    color: var(--cinder-text-disabled);
    cursor: not-allowed;
  }

  /* The required marker is the shared `.cinder-_required-marker` partial
     (styles/components/_field-label.css) so the asterisk can never drift
     between FormField, Label, and the inline control labels. */

  /* ----------------------------------------
 * Supporting text
 * ---------------------------------------- */

  .cinder-form-field__description {
    font-size: var(--cinder-text-xs);
    line-height: var(--cinder-leading-normal);
    color: var(--cinder-text-muted);
    margin: 0;
  }

  .cinder-form-field__warning {
    font-size: var(--cinder-text-xs);
    line-height: var(--cinder-leading-normal);
    color: var(--cinder-status-warning-text);
    margin: 0;
  }

  .cinder-form-field__managed {
    font-size: var(--cinder-text-xs);
    line-height: var(--cinder-leading-normal);
    color: var(--cinder-text-muted);
    margin: 0;
  }

  .cinder-form-field__error {
    font-size: var(--cinder-text-xs);
    line-height: var(--cinder-leading-normal);
    color: var(--cinder-status-danger-text);
    margin: 0;
  }
}