/* -- Property Grid -------------------------------------------------------------
   Two columns over one JSON object - key, value - dense by default. Groups
   (nested objects / arrays) fold; a value edits in place. Every color, radius
   and font is the theme's. */

@layer components {
  :where(.property-grid, .property-grid *, .property-grid *::before, .property-grid *::after) {
    box-sizing: border-box;
  }

  .property-grid {
    --property-grid-key-width: 42%;
    --property-grid-row: 1.875rem;
    --property-grid-pad-x: 0.5rem;
    --property-grid-indent: 0.875rem;
    --property-grid-font: 0.8125rem;

    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--property-grid-font);
    line-height: 1.35;

    &[data-variant="comfortable"] {
      --property-grid-row: 2.375rem;
      --property-grid-pad-x: 0.75rem;
      --property-grid-indent: 1.125rem;
      --property-grid-font: 0.875rem;
    }
    /* inside a panel body (data-flush) the panel is the frame */
    &[data-frame="none"] {
      border: 0;
      border-radius: 0;
      background: transparent;
    }
  }

  .property-grid-table {
    inline-size: 100%;
    border-collapse: collapse;
    table-layout: fixed;

    & thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      block-size: var(--property-grid-row);
      padding: 0 var(--property-grid-pad-x);
      background: var(--muted);
      color: var(--muted-foreground);
      border-block-end: 1px solid var(--border);
      font-size: 0.75em;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-align: start;
      text-transform: uppercase;
    }
    & thead th.property-grid-key {
      inline-size: var(--property-grid-key-width);
      border-inline-end: 1px solid var(--border);
    }
    & tbody tr {
      block-size: var(--property-grid-row);
    }
    & tbody tr + tr > * {
      border-block-start: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    }
  }

  .property-grid-key {
    padding: 0 var(--property-grid-pad-x);
    padding-inline-start: calc(var(--property-grid-pad-x) + var(--depth, 0) * var(--property-grid-indent));
    border-inline-end: 1px solid var(--border);
    font-weight: 500;
    text-align: start;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .property-grid-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .property-grid-value {
    position: relative;
    padding: 0 var(--property-grid-pad-x);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    outline: none;

    &:focus-visible {
      box-shadow: inset 0 0 0 2px var(--ring);
    }
    &[data-editing] {
      padding: 0.125rem;
      overflow: visible;
      white-space: normal;
      cursor: default;
    }
  }
  .property-grid-row:not([data-readonly]) > .property-grid-value:hover {
    background: color-mix(in oklab, var(--accent) 70%, transparent);
  }
  .property-grid-row[data-readonly] > .property-grid-value {
    color: var(--muted-foreground);
    cursor: default;
  }
  .property-grid-row[data-type="number"] > .property-grid-value {
    font-variant-numeric: tabular-nums;
  }

  /* groups: a nested object / array, folded with its toggle */
  .property-grid-group {
    background: color-mix(in oklab, var(--muted) 55%, transparent);

    & > .property-grid-key {
      font-weight: 600;
    }
    & > .property-grid-value {
      cursor: default;
    }
  }
  .property-grid-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-inline-size: 100%;
    margin: 0 0 0 -0.25rem;
    padding: 0.125rem 0.25rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;

    &::before {
      content: "";
      flex: none;
      inline-size: 0.4rem;
      block-size: 0.4rem;
      border-inline-end: 1.5px solid currentColor;
      border-block-end: 1.5px solid currentColor;
      rotate: -45deg;
      transition: rotate 0.15s ease;
    }
    &[aria-expanded="true"]::before {
      rotate: 45deg;
    }
    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
  }

  /* default value renderings */
  .property-grid-summary,
  .property-grid-null {
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: 0.92em;
  }
  .property-grid-null {
    font-style: italic;
  }
  .property-grid-bool {
    font-family: var(--font-mono);
    font-size: 0.92em;

    &[data-value="true"] { color: var(--chart-2); }
    &[data-value="false"] { color: var(--muted-foreground); }
  }
  .property-grid-color {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.92em;
  }
  .property-grid-swatch {
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border: 1px solid color-mix(in oklab, var(--foreground) 25%, transparent);
    border-radius: var(--radius-sm);
  }
  .property-grid-empty > td {
    padding: 0.75rem var(--property-grid-pad-x);
    color: var(--muted-foreground);
    text-align: center;
  }

  /* the editor fills its cell */
  .property-grid-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-block-size: calc(var(--property-grid-row) - 0.25rem);

    & > :is(.input, .select, .textarea) {
      inline-size: 100%;
      min-inline-size: 0;
      font-size: inherit;
    }
    & > .textarea {
      min-block-size: 4.5rem;
      font-family: var(--font-mono);
      font-size: 0.92em;
      resize: vertical;
    }
    & > .switch {
      margin-inline-start: calc(var(--property-grid-pad-x) - 0.125rem);
    }
    & [aria-invalid="true"] {
      border-color: var(--destructive);
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 25%, transparent);
    }
  }
  /* a refused value: the reason under the editor */
  .property-grid-error {
    flex-basis: 100%;
    padding: 0.125rem 0.25rem 0.25rem;
    color: var(--destructive);
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: normal;
  }
  .property-grid-color-input {
    inline-size: 2.5rem;
    block-size: calc(var(--property-grid-row) - 0.5rem);
    margin-inline-start: calc(var(--property-grid-pad-x) - 0.125rem);
    padding: 0.125rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-sm);
    background: var(--background);
    cursor: pointer;
  }

  @media (prefers-reduced-motion: reduce) {
    .property-grid-toggle::before { transition: none; }
  }
  @media (prefers-contrast: more) {
    .property-grid-key,
    .property-grid-table tbody tr + tr > * { border-color: var(--foreground); }
  }
  @media (forced-colors: active) {
    .property-grid,
    .property-grid-key,
    .property-grid-table thead th { border-color: CanvasText; }
    .property-grid-value:focus-visible { outline: 2px solid Highlight; box-shadow: none; }
    .property-grid-swatch { forced-color-adjust: none; }
  }
}