getLogViewerStyles function presentation exported ✓ 100.0%

export function getLogViewerStyles(variant: LogViewerVariant): string {
  const isDark = variant === "panel" || variant === "devtools";

  const bg = isDark ? "#0f172a" : "#ffffff";
  const text = isDark ? "#cbd5e1" : "#1e293b";
  const muted = isDark ? "#475569" : "#64748b";
  const border = isDark ? "#1e293b" : "#e2e8f0";
  const hoverBg = isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)";
  const filterBg = isDark ? "#1e293b" : "#f1f5f9";
  const filterActive = isDark ? "#4f46e5" : "#4f46e5";
  const inputBg = isDark ? "#1e293b" : "#ffffff";
  const inputBorder = isDark ? "#334155" : "#e2e8f0";

  return `
    .lv-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    .lv-filters {
      display: flex;
      gap: 4px;
    }
    .lv-filter-btn {
      padding: 3px 10px;
      border: 1px solid ${inputBorder};
      border-radius: 4px;
      background: ${filterBg};
      color: ${text};
      font-size: 11px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .lv-filter-btn:hover {
      border-color: ${filterActive};
      color: ${filterActive};
    }
    .lv-filter-btn.active {
      background: ${filterActive};
      color: #fff;
      border-color: ${filterActive};
    }
    .lv-search {
      flex: 1;
      min-width: 120px;
      padding: 4px 8px;
      border: 1px solid ${inputBorder};
      border-radius: 4px;
      background: ${inputBg};
      color: ${text};
      font-size: 12px;
      outline: none;
    }
    .lv-search:focus {
      border-color: ${filterActive};
    }
    .lv-clear-btn {
      padding: 3px 8px;
      border: 1px solid ${inputBorder};
      border-radius: 4px;
      background: ${filterBg};
      cursor: pointer;
      font-size: 12px;
      transition: all 0.15s;
    }
    .lv-clear-btn:hover {
      border-color: #dc2626;
    }
    .lv-count {
      font-size: 11px;
      color: ${muted};
      white-space: nowrap;
    }
    .lv-entries {
      flex: 1;
      overflow-y: auto;
      font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
      font-size: 11px;
      background: ${bg};
      border: 1px solid ${border};
      border-radius: 4px;
      max-height: 500px;
    }
    .lv-entry {
      display: flex;
      gap: 8px;
      padding: 3px 8px;
      border-bottom: 1px solid ${border};
      align-items: baseline;
    }
    .lv-entry:last-child {
      border-bottom: none;
    }
    .lv-entry:hover {
      background: ${hoverBg};
    }
    .lv-time {
      color: ${muted};
      flex-shrink: 0;
      min-width: 65px;
    }
    .lv-level {
      flex-shrink: 0;
      min-width: 40px;
      font-weight: 600;
      font-size: 10px;
    }
    .lv-ns {
      color: ${muted};
      flex-shrink: 0;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .lv-msg {
      color: ${text};
      word-break: break-word;
    }
    .lv-empty {
      text-align: center;
      padding: 32px;
      color: ${muted};
      font-size: 13px;
    }
    /* Level colors */
    .lv-debug .lv-level { color: ${muted}; }
    .lv-info .lv-level { color: ${isDark ? "#a5b4fc" : "#4f46e5"}; }
    .lv-info .lv-msg { color: ${isDark ? "#a5b4fc" : "#4f46e5"}; }
    .lv-warn .lv-level { color: ${isDark ? "#fbbf24" : "#d97706"}; }
    .lv-warn .lv-msg { color: ${isDark ? "#fbbf24" : "#d97706"}; }
    .lv-error .lv-level { color: ${isDark ? "#f87171" : "#dc2626"}; }
    .lv-error .lv-msg { color: ${isDark ? "#f87171" : "#dc2626"}; }
    .lv-audit .lv-level { color: ${isDark ? "#c084fc" : "#9333ea"}; }
    .lv-audit .lv-msg { color: ${isDark ? "#c084fc" : "#9333ea"}; }
    /* time-range inputs */
    .lv-time-from, .lv-time-to {
      padding: 4px 6px;
      border: 1px solid ${inputBorder};
      border-radius: 4px;
      background: ${inputBg};
      color: ${text};
      font-size: 11px;
      outline: none;
    }
    .lv-time-from:focus, .lv-time-to:focus {
      border-color: ${filterActive};
    }
    /* Download JSON button */
    .lv-download-json-btn {
      padding: 3px 8px;
      border: 1px solid ${inputBorder};
      border-radius: 4px;
      background: ${filterBg};
      cursor: pointer;
      font-size: 12px;
      transition: all 0.15s;
    }
    .lv-download-json-btn:hover {
      border-color: ${filterActive};
      color: ${filterActive};
    }
    /* Copy buttons */
    .lv-copy-all-btn {
      padding: 3px 8px;
      border: 1px solid ${inputBorder};
      border-radius: 4px;
      background: ${filterBg};
      cursor: pointer;
      font-size: 12px;
      transition: all 0.15s;
    }
    .lv-copy-all-btn:hover {
      border-color: ${filterActive};
      color: ${filterActive};
    }
    .lv-copy-entry-btn {
      flex-shrink: 0;
      margin-left: auto;
      padding: 0 4px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 11px;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .lv-entry:hover .lv-copy-entry-btn {
      opacity: 0.6;
    }
    .lv-copy-entry-btn:hover {
      opacity: 1 !important;
    }
  `;
}