/*
 * Provides styles for ActionText and Trix editor
 *
 * Trix CSS is loaded from unpkg.com CDN via @import below
*/

@import url('https://unpkg.com/trix@2.1.15/dist/trix.css');

/*
 * We need to override trix.css's image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Light mode - match other input fields with white background */
trix-editor {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-color: #d1d5db !important;
}

trix-editor:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
}

/* Dark mode support for Trix editor */
@media (prefers-color-scheme: dark) {
  /* Toolbar background and borders */
  trix-toolbar {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
  }

  /* Toolbar buttons */
  trix-toolbar .trix-button-group {
    border-color: #374151 !important;
  }

  trix-toolbar .trix-button {
    color: #e5e7eb !important;
    background-color: transparent !important;
    border-color: transparent !important;
    filter: invert(1) hue-rotate(180deg) brightness(1.2) !important;
  }

  trix-toolbar .trix-button:hover {
    background-color: #374151 !important;
    filter: invert(1) hue-rotate(180deg) brightness(1.4) !important;
  }

  trix-toolbar .trix-button.trix-active {
    background-color: #374151 !important;
    color: #60a5fa !important;
    filter: invert(0.5) hue-rotate(180deg) brightness(1.5) sepia(0.5) saturate(2) !important;
  }

  trix-toolbar .trix-button:disabled {
    color: #6b7280 !important;
    filter: invert(1) hue-rotate(180deg) brightness(0.6) !important;
  }

  /* Dialogs */
  trix-toolbar .trix-dialog {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
  }

  trix-toolbar .trix-dialog__link-fields .trix-input {
    background-color: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
  }

  trix-toolbar .trix-dialog__link-fields .trix-input:focus {
    border-color: #60a5fa !important;
  }

  trix-toolbar .trix-dialog__link-fields .trix-button {
    background-color: #3b82f6 !important;
    color: white !important;
  }

  trix-toolbar .trix-dialog__link-fields .trix-button:hover {
    background-color: #2563eb !important;
  }

  /* Editor content area - match other input fields */
  trix-editor {
    background-color: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
  }

  trix-editor:focus {
    border-color: #60a5fa !important;
    outline: none !important;
  }

  /* Placeholder text */
  trix-editor:empty:before {
    color: #6b7280 !important;
  }

  /* Content styling */
  .trix-content {
    color: #e5e7eb !important;
  }

  .trix-content a {
    color: #60a5fa !important;
  }

  .trix-content a:visited {
    color: #a78bfa !important;
  }

  .trix-content blockquote {
    border-left-color: #4b5563 !important;
    color: #9ca3af !important;
  }

  .trix-content pre {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
  }

  .trix-content code {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
  }
}