/*
 * 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-editor {
  border-radius: 0.5rem;
}

.trix-display {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;

  .attachment-gallery > :is(action-text-attachment, .attachment) {
    flex: 1 0 33%;
    padding: 0 0.5em;
    max-width: 33%;
  }

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

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

  ol {
    list-style-type: decimal;
  }

  ul {
    list-style-type: disc;
  }

  ul,
  ol {
    padding-left: 1rem;
  }

  a {
    text-decoration: none;
    color: rgb(var(--color-ocean-30));
    font-weight: 600;
  }

  h1 {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
  }

  h2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
  }

  h3 {
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
  }
}

trix-editor[disabled] {
  background: rgb(var(--color-smoke-90));
  color: rgb(var(--color-smoke-60));
  border-color: transparent;
}

[data-popover-target='card'] .trix-display {
  & > :last-child {
    margin-bottom: 0;
  }
}