/*
 * Custom styles for Trix editor
 */

.trix-content {
  min-height: auto;
  color: #27272a; /* zinc-800 */
}

.dark .trix-content {
  color: #e4e4e7; /* zinc-200 */
}

trix-toolbar {
  padding: 0.5rem;
  background-color: #f4f4f5; /* zinc-100 */
  border-bottom: 1px solid #e4e4e7; /* zinc-200 */
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dark trix-toolbar {
  background-color: #3f3f46; /* zinc-700 */
  border-bottom: 1px solid #52525b; /* zinc-600 */
}

trix-toolbar .trix-button {
  border-radius: 0.25rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #374151; /* gray-700 */
  border-right: 1px solid #e4e4e7; /* zinc-200 */
  background-color: white;
}

trix-toolbar .trix-button:last-child {
  border-right: none;
}

.dark trix-toolbar .trix-button {
  color: #e4e4e7; /* zinc-200 */
  border-color: #52525b; /* zinc-600 */
  background-color: #3f3f46; /* zinc-700 */
}

trix-toolbar .trix-button.trix-active {
  background-color: #e0e7ff; /* indigo-100 */
}

.dark trix-toolbar .trix-button.trix-active {
  background-color: #4f46e5; /* indigo-600 */
}

trix-toolbar .trix-button:hover:not(.trix-active) {
  background-color: #e4e4e7; /* zinc-200 */
}

.dark trix-toolbar .trix-button:hover:not(.trix-active) {
  background-color: #52525b; /* zinc-600 */
}

trix-editor {
  min-height: 300px;
  padding: 1rem;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  background-color: white;
  border: 1px solid #e4e4e7; /* zinc-200 */
  border-top: none;
}

.dark trix-editor {
  background-color: #27272a; /* zinc-800 */
  color: #e4e4e7; /* zinc-200 */
  border-color: #52525b; /* zinc-600 */
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-right: 0.5rem;
  border: 1px solid #e4e4e7; /* zinc-200 */
  border-radius: 0.25rem;
  overflow: hidden;
}

.dark trix-toolbar .trix-button-group {
  border-color: #52525b; /* zinc-600 */
}

/* Fix for when icons don't load properly */
.trix-icon-fallback {
  font-weight: bold;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  display: inline-block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide raw button text content */
.trix-button[data-trix-attribute]:not(:empty)::before,
.trix-button[data-trix-action]:not(:empty)::before {
  display: none;
}

/* Ensure trix-button-icon is visible */
.trix-button-icon {
  display: inline-block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Add proper spacing to nested elements */
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  margin: 0 0.1em;
  padding: 0.01em 0.2em;
}

/* Add proper styling for lists */
trix-editor ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

trix-editor ol {
  list-style-type: decimal;
  padding-left: 1.5em;
}

/* Make sure attachments display properly */
trix-editor .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

trix-editor .attachment--preview {
  width: 100%;
  text-align: center;
}