@layer components {
  .trix-content {
    color: #111827;
    /* text-gray-900 */
  }

  @media (prefers-color-scheme: dark) {
    .trix-content {
      color: #ffffff;
      /* dark:text-white */
    }

    trix-editor {
      color: #ffffff !important;
      background-color: #1f2937 !important;
      /* dark:bg-gray-800 */
      border-color: #374151 !important;
      /* dark:ring-gray-700 */
    }

    trix-toolbar .trix-button {
      color: #ffffff !important;
    }

    trix-toolbar .trix-button--icon::before {
      filter: invert(1);
    }

    trix-toolbar .trix-button.trix-active {
      background: #374151 !important;
      color: #ffffff !important;
    }
  }

  /* Spark Modal Specific Overrides */
  .spark-modal-form trix-toolbar {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    /* smooth scrolling on iOS */
    scrollbar-width: none;
    /* Firefox */
  }

  .spark-modal-form trix-toolbar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
  }

  .spark-modal-form trix-editor {
    height: 100% !important;
    max-height: 100% !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
    background-color: transparent !important;
  }

  .spark-modal-form .trix-content {
    height: 100%;
  }

  /* Make sure cursor is visible in dark mode */
  .dark .spark-modal-form trix-editor {
    color: white !important;
    background-color: transparent !important;
  }
}