/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Contenteditable placeholder */
[contenteditable]:empty:before {
  content: attr(placeholder);
  color: #9ca3af;
  cursor: text;
}

/* Dark mode contenteditable placeholder */
.dark [contenteditable]:empty:before {
  color: #6b7280;
}

/* Custom scrollbar for sidebar */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb #f9fafb;
}

.dark .sidebar-scroll {
  scrollbar-color: #4b5563 #1f2937;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 3px;
}

.dark .sidebar-scroll::-webkit-scrollbar-track {
  background: #1f2937;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 3px;
}

.dark .sidebar-scroll::-webkit-scrollbar-thumb {
  background: #4b5563;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: #d1d5db;
}

.dark .sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Syntax highlighting
   -------------------------------------------------------------------------- */

/* Shared glyph weight */
::highlight(placeholder),
::highlight(single-brace),
::highlight(variable) {
  font-weight: 600;
}

::highlight(list-marker) {
  font-weight: 700;
}

/* Light theme */
::highlight(placeholder) {
  color: #ec4899;
  background-color: rgba(236, 72, 153, 0.1);
  font-style: italic;
}

::highlight(single-brace) {
  color: #8b5cf6;
  background-color: rgba(139, 92, 246, 0.1);
}

::highlight(variable) {
  color: #10b981;
  background-color: rgba(16, 185, 129, 0.1);
}

::highlight(list-marker) {
  color: #6b7280;
  background-color: transparent;
}

/* Dark theme */
.dark ::highlight(placeholder) {
  color: #f472b6;
  background-color: rgba(244, 114, 182, 0.15);
  font-style: italic;
}

.dark ::highlight(single-brace) {
  color: #a78bfa;
  background-color: rgba(167, 139, 250, 0.15);
}

.dark ::highlight(variable) {
  color: #34d399;
  background-color: rgba(52, 211, 153, 0.15);
}

.dark ::highlight(list-marker) {
  color: #9ca3af;
  background-color: transparent;
}