trix-toolbar {
  display: none;
  position: sticky;
  inset: auto 0 0 0;
  min-width: 0;

  .trix-dialog {
    top: auto !important;
    bottom: 3rem !important;
  }


  .trix-button--icon {
    height: auto !important;
  }

  .trix-dialog {
    border: 2px solid var(--color-text) !important;
    box-shadow: none !important;
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-radius: 1rem !important;
    padding: 0 !important;
    gap: var(--inline-space);

    .trix-input {
      background: transparent !important;
      color: var(--color-text) !important;
      font-size: max(16px, 1em) !important;
      border: 0 !important;
      padding: var(--input-padding, 0.5em 0.8em) !important;
    }

    .trix-button {
      color: var(--color-text) !important;
    }
  }
}

trix-editor {
  &.input {
    min-height: 24px;
  }

  .attachment--content {
    margin: 0;
    display: inline-flex;

    .attachment__toolbar {
      top: 0;
      z-index: 2;
    }
  }
}

.trix-button-group--file-tools,
.trix-button-group--history-tools {
  display: none !important;
}

.trix-button-group,
.trix-button {
  border: 0 !important;
  margin: 0 !important;
  border-radius: 0.3em !important;

  &::before {
    opacity: 1 !important;
  }

  @media (prefers-color-scheme: dark) {
    &::before {
      filter: invert(100);
    }
  }

  &.trix-active {
    background-color: var(--color-text) !important;

    &::before {
      filter: invert(100);
    }

    @media (prefers-color-scheme: dark) {
      &::before {
        filter: invert(0);
      }
    }
  }

  &.trix-button--remove {
    background-color: var(--color-negative);
    border-radius: 1.8em !important;

    &::before {
      filter: invert(100);
      background-size: 70%;
      background-image: url("/assets/minus-b31a1093f2efa1ae72aa487c59826b2d8218a504.svg");
    }
  }
}

.trix-button:disabled {
  opacity: 0.33;
}

trix-editor,
.trix-content {
  & pre {
    background-color: var(--color-bg) !important;
    border-radius: 0.5em;
    white-space: pre-wrap !important;
    word-wrap: break-word;
    font-family: monospace;
    font-size: 0.8rem !important;
    padding: 1em !important;
    margin: 0 !important;
    border: 1px solid var(--color-border);
  }

  --blockquote-border: 0.5ch;
  --blockquote-padding: 1.5ch;
  --blockquote-margin: var(--inline-space);

  & blockquote {
    border: 0 solid var(--color-border--heavy) !important;
    border-inline-start-width: var(--blockquote-border) !important;
    margin: 0 var(--blockquote-margin) !important;
    padding-inline-start: var(--blockquote-padding) !important;
  }

  & cite {
    margin-inline-start: calc(var(--blockquote-padding));
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 600;

    &::before {
      content: "— ";
      color: var(--color-border--heavy);
    }
  }

  & ul,
  & ol {
    margin: 0 !important;
    padding: 0 !important;
  }

  & li {
    margin: 0 0 0 calc(var(--inline-space) * 2) !important;
    padding: 0 !important;
  }

  & h1 {
    font-size: 1.4rem !important;
    margin: 0;
  }
}