//
// 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.
//
@import "../../../node_modules/trix/dist/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,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

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

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

trix-editor + .help-block {
  margin-top: 0.25em !important;
}

trix-editor {
  word-wrap: break-word !important;
  overflow-y: scroll !important;
}

.trix-content .attachment--preview, .trix-content .attachment__caption, trix-editor .attachment__caption-editor {
  text-align: left;
}

.trix-content .attachment__caption, trix-editor .attachment__caption-editor {
  margin: 0.5em 0;
}

// Remove the attachments button from the toolbar
.no-attachments .trix-button-group--file-tools { display: none !important; }
