@import url("/assets/trix-c4e7be2d.css");

trix-toolbar {
  inset-block-start: 0;
  position: sticky;
  z-index: 1;

  .trix-button-group {
    border: none;
    gap: 1px;
  }
  .trix-button {
    display: block;
    background-color: var(--surface-1);
    border-radius: var(--radius-2);
    border: var(--border-size-1) solid var(--text-1) !important;
    box-shadow: none;

    &.trix-active {
      background-color: var(--surface-2);
    }
    &.trix-button--icon::before {
      opacity: 1;
    }
    &.trix-button--icon:disabled::before {
      opacity: 0.125;
    }
  }
  .trix-dialog {
    background-color: var(--surface-1);
    border: 1px solid var(--gray-4);
    border-radius: var(--radius-2);
    margin: var(--size-1);
    box-shadow: var(--shadow-2);
    padding: var(--size-3);
  }
  .trix-input--dialog {
    background-color: var(--surface-2);
    border: none;
    font-size: var(--font-size-1);
    margin: 0;
    border-radius: var(--radius-2);
  }
  .trix-button--dialog {
    margin-inline-start: var(--size-1);
    color: var(--text-1);
    font-size: var(--font-size-1);
    padding: var(--size-1) var(--size-2);
  }
  @media (max-width: 48rem) {
    .trix-button-group--history-tools { display: none; }
  }
}

trix-editor {
  border: none;
  border-radius: var(--radius-2);
  padding: var(--size-3);
  min-block-size: var(--size-72);
  background-color: var(--surface-2);

  [data-trix-mutable].attachment img,
  [data-trix-mutable].attachment--content,
  [data-trix-mutable].attachment--file {
    box-shadow: 0 0 0 2px var(--link);
  }
  .attachment__caption-editor {
    border-radius: var(--radius-2);
    background-color: var(--surface-4);
    color: var(--text-1);
    margin-block-start: var(--size-2);
  }
  .attachment__metadata {
    border-radius: var(--radius-2);
    background-color: var(--surface-2);
    color: var(--text-1);
  }
  &:focus-visible {
    outline: 0;
  }
}

.trix-content {
  & {
    line-height: 1.5;
  }
  a {
    color: var(--link);
    text-decoration: underline;
  }
  h1 {
    margin-block-end: var(--size-3);
  }
  blockquote {
    border-inline-start: 2px solid var(--gray-4);
    font-style: italic;
    margin: 0;
    padding-inline-start: var(--size-3);
    padding-inline-end: 0;
  }
  pre {
    background-color: var(--surface-3);
    border-radius: var(--radius-2);
    font-size: var(--font-size-1);
    line-height: 1.5;
    padding: var(--size-3);
  }
  ul {
    list-style-type: disc;
    margin-inline-start: var(--size-3);
  }
  ol {
    list-style-type: decimal;
    margin-inline-start: var(--size-3);
  }
  .attachment {
    display: inline-block;
    max-width: 100%;
  }
  .attachment figure {
    margin: 0;
    display: block;
  }
  .attachment img,
  .attachment--content,
  .attachment--file {
    border-radius: var(--radius-2);
    padding: var(--size-1);
    border: 1px solid var(--gray-4);
    margin-inline: auto;
  }
  .attachment__caption {
    margin-block-start: var(--size-2);
    text-align: center;
    color: var(--text-2);
    margin-inline: auto;
  }
  .attachment-gallery > action-text-attachment,
  .attachment-gallery > .attachment {
    flex: 1 0 33%;
    padding: 0 0.5em;
    max-width: 33%;
  }
  .attachment-gallery.attachment-gallery--2 > action-text-attachment,
  .attachment-gallery.attachment-gallery--2 > .attachment, 
  .attachment-gallery.attachment-gallery--4 > action-text-attachment,
  .attachment-gallery.attachment-gallery--4 > .attachment {
    flex-basis: 50%;
    max-width: 50%;
  }
  action-text-attachment .attachment {
    padding: 0 !important;
    max-width: 100% !important;
  }
}