/*
 * 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.
*/

/* Action Text */
.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;
}
/* CSS Zero */
trix-toolbar {
  inset-block-start: 0;
  inline-size: 100%;
  position: sticky;
  .trix-button-row {
    background-color: var(--color-bg);
    border-block-width: 1px;
    column-gap: 1px;
    padding-block: var(--size-1_5);
  }
  .trix-button-group {
    border: 0 !important;
    column-gap: 1px;
    margin: 0 !important;
  }
  .trix-button {
    background-color: var(--color-bg);
    border: 0 !important;
    border-radius: var(--rounded-md);
    color: var(--color-text);
    &.trix-active {
      background-color: var(--color-border-light);
    }
    &.trix-button--icon::before {
      opacity: 1;
    }
    &.trix-button--icon:disabled::before {
      opacity: 0.125;
    }
    [data-color-scheme="dark"] & {
      &.trix-button--icon::before {
        filter: invert(1);
      }
    }
  }
  .trix-dialog {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded-md);
    margin: var(--size-1);
    box-shadow: var(--shadow-md);
  }
  .trix-input--dialog {
    border-color: var(--color-border);
    background-color: var(--color-bg);
    margin: 0;
  }
  .trix-button--dialog {
    margin-inline-start: var(--size-1_5);
    background-color: var(--color-primary);
    color: var(--color-text-reversed);
  }
  @media (max-width: 48rem) {
    .trix-button-group--history-tools {
      display: none;
    }
  }
}
trix-editor {
  border: 0;
  inline-size: 100%;
  min-block-size: var(--size-72);
  padding-block: var(--size-6) var(--size-2);
  &:empty:not(:focus)::before {
    color: color-mix(in oklab, currentColor 50%, transparent);
  }
  [data-trix-mutable].attachment img,
  [data-trix-mutable].attachment--content,
  [data-trix-mutable].attachment--file {
    box-shadow: 0 0 0 2px var(--color-selected-dark);
  }
  .attachment__metadata {
    background-color: var(--color-border-light);
    color: var(--color-text);
  }
  &:focus-visible {
    outline: 0;
  }
}
.trix-content {
  & {
    line-height: var(--leading-7);
  }
  a {
    color: var(--color-link);
    text-decoration: underline;
  }
  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-8);
    margin-block-end: var(--size-6);
  }
  blockquote {
    border-inline-start: 2px solid var(--color-border);
    font-style: italic;
    margin: 0;
    padding-inline-start: var(--size-6);
    padding-inline-end: 0;
  }
  pre {
    background-color: var(--color-border-light);
    border-radius: var(--rounded-lg);
    font-family: var(--font-monospace-code);
    font-size: var(--text-sm);
    line-height: var(--leading-5);
    padding: var(--size-4);
  }
  ul {
    list-style-type: disc;
    margin-inline-start: var(--size-6);
  }
  ol {
    list-style-type: decimal;
    margin-inline-start: var(--size-6);
  }
  li {
    margin: 0;
  }
  img {
    display: inline;
  }
  action-text-attachment {
    display: contents;
  }
  .attachment:not(.attachment--file) {
    .attachment__caption {
      display: none;
    }
  }
  .attachment--file {
    color: var(--color--text);
    border: 1px solid var(--color-border);
  }
  .attachment__progress {
    background-color: var(--color-border-light);
    border-radius: var(--rounded-full);
    overflow: hidden;
    &::-webkit-progress-bar {
      background-color: var(--color-border-light);
    }
    &::-webkit-progress-value {
      background-color: var(--color-primary);
    }
    &::-moz-progress-bar {
      background-color: var(--color-primary);
    }
  }
}
.trix--minimal {
  .trix-button-group--file-tools {
    display: none;
  }
  .trix-button-group--history-tools {
    display: none;
  }
}