@import "../style.css";

/* JSON Formatter Custom Tool Layout Styles */
.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--bg-input);
  color: var(--text-secondary);
}

.badge.valid {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge.invalid {
  background-color: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Make sure container aligns perfectly in columns */
.output-box code {
  font-family: var(--font-mono) !important;
  font-size: 0.875rem !important;
}

/* Override Prism default backgrounds to match One Dev Tools minimalist theme */
:root[theme="dark"] pre[class*="language-"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-muted) !important;
  margin: 0 !important;
}

:root[theme="light"] pre[class*="language-"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-muted) !important;
  margin: 0 !important;
}