/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   JSON FORMATTER
   ================================================================== */

.jp-json-formatter {
  display: grid;

  gap: var(--jp-space-5);
}

/* ==================================================================
   EDITOR
   ================================================================== */

.jp-json-editor {
  padding: var(--jp-space-6);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-md);

  background: var(--jp-surface);

  box-shadow: var(--jp-shadow-sm);
}

/* ==================================================================
   JSON INPUT
   ================================================================== */

.jp-json-input {
  min-height: 240px;

  height: clamp(240px, 36vh, 340px);

  resize: vertical;

  font-family: var(--jp-font-mono);
  font-size: 0.95rem;

  line-height: var(--jp-leading-relaxed);

  tab-size: 4;
}

/* ==================================================================
   ACTIONS
   ================================================================== */

.jp-json-actions {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: var(--jp-space-3);
}

/* ==================================================================
   STATUS
   ================================================================== */

.jp-json-status {
  min-height: 1.5rem;

  padding: 0 var(--jp-space-1);

  color: var(--jp-text-muted);

  font-size: var(--jp-text-sm);
}

.jp-json-status.is-success {
  color: var(--jp-success);

  font-weight: var(--jp-weight-semibold);
}

.jp-json-status.is-error {
  color: var(--jp-danger);

  font-weight: var(--jp-weight-semibold);
}

/* ==================================================================
   TABLET
   ================================================================== */

@media (max-width: 800px) {
  .jp-json-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==================================================================
   MOBILE
   ================================================================== */

@media (max-width: 550px) {
  .jp-json-input {
    min-height: 240px;

    height: 280px;

    font-size: var(--jp-text-sm);
  }

  .jp-json-actions {
    grid-template-columns: 1fr;
  }
}