once-campfire/app/assets/stylesheets/actiontext.css

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

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

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

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

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

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

  .trix-dialog--link {
    .trix-dialog__link-fields {
      align-items: center;
      padding-right: 0.3em;
    }

    [value="Link"],
    [value="Unlink"] {
      width: 2.6em;
      aspect-ratio: 1 / 1;
      background-position: center center;
      background-repeat: no-repeat;
      text-indent: -9999%;
      padding: 0;
    }

    [value="Link"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M18.948 5.258a4.337 4.337 0 0 0-6.108 0L11.217 6.87a.993.993 0 0 0 0 1.41c.392.39 1.027.39 1.418 0l1.623-1.613a2.323 2.323 0 0 1 3.271 0 2.29 2.29 0 0 1 0 3.251l-2.393 2.38a3.021 3.021 0 0 1-4.255 0l-.05-.049a1.007 1.007 0 0 0-1.418 0 .993.993 0 0 0 0 1.41l.05.049a5.036 5.036 0 0 0 7.091 0l2.394-2.38a4.275 4.275 0 0 0 0-6.072Zm-13.683 13.6a4.337 4.337 0 0 0 6.108 0l1.262-1.255a.993.993 0 0 0 0-1.41 1.007 1.007 0 0 0-1.418 0L9.954 17.45a2.323 2.323 0 0 1-3.27 0 2.29 2.29 0 0 1 0-3.251l2.344-2.331a2.579 2.579 0 0 1 3.631 0c.392.39 1.027.39 1.419 0a.993.993 0 0 0 0-1.41 4.593 4.593 0 0 0-6.468 0l-2.345 2.33a4.275 4.275 0 0 0 0 6.072Z' clip-rule='evenodd'/%3E%3C/svg%3E"); }

    [value="Unlink"] {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M18.954 5.264a3.58 3.58 0 0 0-5.04 0l-2.157 2.144a.993.993 0 0 0 0 1.41c.392.39 1.027.39 1.418 0l2.157-2.144a1.565 1.565 0 0 1 2.204 0c.607.603.609 1.58.005 2.186l-2.348 2.355a.993.993 0 0 0 .006 1.41 1.007 1.007 0 0 0 1.419-.007l2.347-2.354a3.528 3.528 0 0 0-.01-5ZM5.257 18.852a3.59 3.59 0 0 0 5.041.015l2.6-2.554a.993.993 0 0 0 .01-1.41 1.007 1.007 0 0 0-1.419-.009l-2.6 2.554c-.615.603-1.603.6-2.214-.006a1.554 1.554 0 0 1-.012-2.195l2.539-2.58a.993.993 0 0 0-.016-1.41 1.007 1.007 0 0 0-1.418.015l-2.539 2.58a3.54 3.54 0 0 0 .028 5Z' clip-rule='evenodd'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='2' d='M10.233 5.78V3.769M5.968 9.802H4.21M7.343 7.107 5.968 5.781M14.348 17.523v2.013M18.613 13.502h1.758M17.238 16.196l1.375 1.327'/%3E%3C/svg%3E%0A");
      border-top-right-radius: 1em !important;
      border-bottom-right-radius: 1em !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;
  box-shadow: none;

  &::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("minus.svg");
    }
  }
}

[data-trix-content-type~='application/vnd.campfire.mention'] {
  .trix-button-group {
    display: inline;
  }
}

[data-trix-content-type~="application/vnd.actiontext.opengraph-embed"] {
  * {
    text-decoration: none;
  }

  trix-editor & {
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
  }
}

.trix-button:not(.trix-button--remove) {
  @media (any-hover: hover) {
    &:where(:not(:active):hover) {
      filter: brightness(0.9);
      background-color: var(--color-bg);
    }
  }

  &:disabled {
    opacity: 0.33;
  }
}

trix-editor,
.trix-content {
  pre {
    background-color: var(--color-bg) !important;
    border-radius: 0.5em;
    border: 1px solid var(--color-border);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monaco, monospace;
    font-size: 0.8rem !important;
    margin: 0 !important;
    padding: 1em !important;
    white-space: pre-wrap !important;
    word-wrap: break-word;
  }

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

  blockquote {
    border: 0 solid var(--color-border-darker) !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-darker);
    }
  }

  a {
    color: var(--color-link);
  }

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

  li {
    margin: 0 0 0 var(--inline-space-double) !important;
    padding: 0 !important;
  }

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