/*
 * Action Text Trix Editor Styles
 *
 * Trix CSS is loaded via CDN in the layout (see application.html.slim)
 * This file contains only the Action Text-specific overrides for attachment galleries
 */

/* Increase Trix editor height for better usability */
trix-editor {
  min-height: 400px !important;
  max-height: 600px;
  overflow-y: auto;
}

/* Ensure the editor has proper padding */
trix-editor.trix-content {
  padding: 1rem;
}

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

/* Force mentions to be inline */
.trix-content action-text-attachment.mention,
action-text-attachment {
  display: inline-block !important;
}

/* Trix Editor Customizations */

.youtube-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}