/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *
 *= require trix
*/

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

/* Fix Trix button icon styling */
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
}

trix-toolbar .trix-button {
  width: 36px !important; 
  height: 36px !important;
  padding: 6px !important;
  box-sizing: border-box;
}

trix-toolbar .trix-button-group {
  display: flex;
  border: 1px solid #e4e4e7;
  border-radius: 0.25rem;
  overflow: hidden;
  margin-right: 8px;
  margin-bottom: 4px;
}

/* Fix specific button icon issues */
trix-toolbar .trix-button--icon {
  font-size: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

trix-toolbar .trix-button--icon-bold::before {
  content: "B";
  font-weight: bold;
  font-size: 14px !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

trix-toolbar .trix-button--icon-italic::before {
  content: "I";
  font-style: italic;
  font-size: 14px !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

trix-toolbar .trix-button--icon-strike::before {
  content: "S";
  text-decoration: line-through;
  font-size: 14px !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

trix-toolbar .trix-button--icon-link::before {
  content: "🔗";
  font-size: 14px !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

trix-toolbar .trix-button--icon-heading-1::before {
  content: "H1";
  font-weight: bold;
  font-size: 14px !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

trix-toolbar .trix-button--icon-quote::before {
  content: "\"";
  font-size: 16px !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

trix-toolbar .trix-button--icon-bullet-list::before {
  content: "•";
  font-size: 16px !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

trix-toolbar .trix-button--icon-number-list::before {
  content: "1.";
  font-size: 14px !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide raw text displayed in toolbar buttons */
trix-toolbar .trix-button:not(.trix-button--icon) > span {
  display: none;
}

/* Make buttons appear as relative positioned elements */
trix-toolbar .trix-button {
  position: relative;
}