/*
 * 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;
}

.trix-content u {
  text-decoration: underline;
}

/* Color text attributes for Trix editor - using inline styles */
.trix-content span[style*="color: #0d6efd"],
.trix-content span[style*="color: rgb(13, 110, 253)"] {
  color: #0d6efd !important;
}

.trix-content span[style*="color: #198754"],
.trix-content span[style*="color: rgb(25, 135, 84)"] {
  color: #198754 !important;
}

.trix-content span[style*="color: #dc3545"],
.trix-content span[style*="color: rgb(220, 53, 69)"] {
  color: #dc3545 !important;
}

.trix-content span[style*="color: #d18600"],
.trix-content span[style*="color: rgb(209, 134, 0)"] {
  color: #d18600 !important;
}

.trix-content span[style*="color: #6c757d"],
.trix-content span[style*="color: rgb(108, 117, 125)"] {
  color: #6c757d !important;
}

/* Custom Trix color selector styling */
.trix-color-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  height: 20.8px;
  padding: 0 20px 0 6.5px;
  border: none;
  border-left: 1px solid #888;
  border-radius: 0;
  background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5"><path d="M0 0 L4 5 L8 0" fill="%23666"/></svg>') no-repeat right 6px center;
  background-size: 8px;
  font-size: 13px;
  cursor: pointer;
  vertical-align: baseline;
  box-sizing: border-box;
  line-height: 19.5px;
  color: inherit;
  font-family: inherit;
}

.trix-color-select:focus {
  outline: none;
}