@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/input/input.css';
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/textarea/textarea.css';

@layer cinder.components {
  .cinder-schema-form {
    display: grid;
    gap: var(--cinder-space-4);
    color: var(--cinder-text-default);
  }

  .cinder-schema-form__fields,
  .cinder-schema-form__fieldset,
  .cinder-schema-form__array {
    display: grid;
    gap: var(--cinder-space-3);
  }

  .cinder-schema-form__fieldset {
    margin: 0;
    padding: var(--cinder-space-4);
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-md);
  }

  .cinder-schema-form__legend {
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1);
    padding-inline: var(--cinder-space-1);
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-medium);
  }

  .cinder-schema-form__field {
    display: grid;
    gap: var(--cinder-space-2);
  }

  /* Group-level (object/array fieldset) description and error. Leaf-field
     supporting text is owned by the composed cinder controls themselves. */
  .cinder-schema-form__description {
    margin: 0;
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }

  .cinder-schema-form__error {
    margin: 0;
    color: var(--cinder-status-danger-text);
    font-size: var(--cinder-text-sm);
  }

  /* JSON drafts edit raw text — the composed Textarea's `variant="code"`
     supplies the monospace metrics; this class only owns sizing/resize. */
  .cinder-schema-form__json-control {
    min-block-size: 8rem;
    resize: vertical;
  }

  .cinder-schema-form__array-item {
    display: grid;
    gap: var(--cinder-space-2);
    padding: var(--cinder-space-3);
    border: 1px dashed var(--cinder-border-muted);
    border-radius: var(--cinder-radius-md);
  }

  .cinder-schema-form__secondary-button:focus-visible,
  .cinder-schema-form__submit:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow:
      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
  }

  .cinder-schema-form__secondary-button,
  .cinder-schema-form__submit {
    justify-self: start;
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-md);
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-medium);
    cursor: pointer;
  }

  .cinder-schema-form__secondary-button {
    padding: var(--cinder-space-2) var(--cinder-space-3);
    background: var(--cinder-surface);
    color: var(--cinder-text-default);
  }

  .cinder-schema-form__submit {
    padding: var(--cinder-space-2) var(--cinder-space-4);
    border-color: var(--cinder-accent-solid);
    background: var(--cinder-accent-solid);
    color: var(--cinder-accent-contrast);
  }

  .cinder-schema-form__submit:disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  @media (forced-colors: active) {
    .cinder-schema-form__secondary-button,
    .cinder-schema-form__submit {
      border-color: CanvasText;
    }

    .cinder-schema-form__secondary-button:focus-visible,
    .cinder-schema-form__submit:focus-visible {
      outline: var(--cinder-ring-width) solid Highlight;
      outline-offset: 3px;
      box-shadow: none;
    }
  }
}