/* Trix toolbar
 * -------------------------------------------------------------------------- */

trix-toolbar {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  right: 0;
  bottom: 6.7rem;
  z-index: 7;
  padding: 1rem 0 0 0;

  .trix-button-row {
    background: var(--color-bg--surface-glint-opaque);

    @media (min-width: 40em) { border-radius: 3rem; }
    [data-color-scheme="dark"] & { background: var(--color-bg--surface-opaque); }
  }

  .trix-dialogs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .trix-dialog.trix-active {
    margin: 0 auto;
    border: 0;
    box-shadow: none;
    background: var(--color-secondary);
    padding: 1.25em;
    border-radius: 1.5em;
    bottom: 0;
    top: auto;
  }

  .trix-input--dialog {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    background-color: var(--color-bg--main);
    border-radius: 0.6rem;
    box-sizing: border-box;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    max-width: 100%;
    padding: 0.5em;
    resize: none;

    &:focus,
    &:focus-within {
      box-shadow: 0 0 0 2px var(--color-focus-ring);
      outline: none;
    }

    /* Don't show outlines for mouse interactions */
    &:focus:not(:focus-visible) {
      outline: none;
    }

    &:disabled { opacity: 0.5; pointer-events: none; }
    &:required { box-shadow: none; }
    &::-ms-clear { display: none; }
  }

  .trix-button--dialog {
    color: var(--color-txt);
    background: var(--color-primary);
    width: 7rem;
    margin-left: 0.4em !important;
    font-weight: 500;

    [data-color-scheme="dark"] & { color: var(--color-txt--reversed); }
  }

  .trix-button {
    border-radius: 3rem;

    &.trix-active { background-color: var(--color-bg--main); }

    [data-color-scheme="dark"] & {
      &::before { filter: invert(1); }
    }
  }
}

.trix-button-group,
.trix-button {
  border: 0 !important;
  margin: 0 !important;
}

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

.trix-button-group--text-tools,
.trix-button-group--block-tools {
  padding: 0.5rem;
}

.trix-button {
  border-radius: 4px;
  margin-left: 1px;
  margin-right: 1px;
}

.trix-button--icon-attach {
  width: 3rem;
}

.trix-button--icon-link::before {
  background-image: url("/assets/icons/link-6db04267.svg") !important;
}

/* Trix Editor
 * -------------------------------------------------------------------------- */

trix-editor:empty:not(:focus)::before {
  color: var(--color-txt--placeholder);
}

trix-editor blockquote,
.trix-content blockquote {
  margin: 0;
  padding-block: 0;
  padding-inline-start: 0.66em;
  padding-inline-end: 0;
  border-inline-start: 1px solid var(--color-border);
}

/* In-editor content attachments (quoted HTML) */
trix-editor {
  .attachment--content {
    /* Prevent link clicks */
    a { pointer-events: none; }

    /* Disable image outlines when selected */
    img { box-shadow: none !important; }
  }

  blockquote .attachment--content {
    word-break: initial;
  }

  [data-trix-mutable].attachment img,
  [data-trix-mutable].attachment--content,
  [data-trix-mutable].attachment--file {
    box-shadow: 0 0 0 2px var(--color-secondary) !important;
  }

  .attachment__metadata {
    top: 1em;
    background: var(--color-secondary);
    color: var(--color-txt--reversed);

    &:has(.attachment__name:empty):has(.attachment__size:empty) { display: none; }
  }

  .attachment__toolbar {
    top: calc((0.9em + 0.75rem) * -1);

    .trix-button-group {
      margin-top: 0.25em !important;
      padding: 0.75rem 1rem;
      border-radius: 1.5rem;
      gap: 0.5rem;
      background: var(--color-secondary);
    }
  }

  .trix-button {
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    text-indent: -9999px;
    display: inline-block;
    padding: 0;
    outline: none;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    border-radius: 50%;

    &::before {
      filter: var(--colorize-inverted-ink);
      display: inline-block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: "";
      background-position: center;
      background-repeat: no-repeat;
      background-size: 90%;
      opacity: 1;
    }
  }

  .trix-button--remove::before {
    background-image: url("/assets/icons/cancel-2169cbef.svg");
  }

  .trix-button--make-editable::before {
    background-image: url("/assets/icons/edit-fe267037.svg");
  }
}

/* Trix Content
 * -------------------------------------------------------------------------- */

.trix-content {
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;

  h1 {
    font-size: 1.3em;
    margin-bottom: 0.5em;
  }

  a {
    color: var(--color-txt--action);
    text-decoration: underline;

    /* Use foreground colors, if applied via color-picker */
    [style*="color"] {
      text-decoration: underline !important;
      text-decoration-color: unset !important;
    }
  }

  ul,
  ol {
    margin: 0;
    padding-inline-start: 2.25em !important;
  }

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

  pre {
    white-space: pre-wrap;
    background-color: var(--color-bg--surface);
  }

  /* Attachments */
  img {
    width: auto;
    max-height: 64rem;
  }

  action-text-attachment {
    display: contents;
  }

  .attachment-gallery {
    gap: 4px;

    .attachment {
      flex: 1 0 33%;
      margin: 0 0 1em;
      max-width: calc(33% - 10px);
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      .attachment {
        flex-basis: 50%;
        max-width: calc(50% - 10px);
      }
    }
  }

  .attachment--remote img {
    text-align: inherit !important;
    display: inherit !important;
  }

  .attachment:not(.attachment--file) {
    .attachment__caption { display: none; }
  }

  .attachment--file {
    color: var(--color--txt);
    border: 0;
    border-radius: 10px;
    max-width: 200px;

    .attachment__progress {
      top: calc(100% - 12px);
      bottom: 0;

      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      height: 8px;
      border-radius: 4px;
      border: 1px solid var(--color-border);

      &::-webkit-progress-bar {
        background-color: var(--color-bg--surface);
        border-radius: 4px;
      }

      &::-webkit-progress-value {
        background-color: var(--color-secondary);
        border-radius: 4px;
      }

      &::-moz-progress-bar {
        background-color: var(--color-secondary);
        border-radius: 4px;
      }
    }
  }

  .attachment__file-link {
    inset: 0;
    position: absolute;
    text-indent: -9999em;
    z-index: 1;
  }

  .entry--announcement & .video-container {
    position: relative;
    overflow: hidden;
    width: 100%;

    &::after {
      display: block;
      content: "";
      padding-top: 56.25%;
    }

    video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .entry-composer--on-sheet &,
  .attack-mode__composer &,
  .sheet--world-perma & {
    /* Converts Trix colors in app/helpers/rich_text_helper#color_picker_dialog for display in dark mode */
    [data-color-scheme="dark"] & {
      /* Foreground colors */
      [style*="136, 118, 38"] { color: #faf785 !important; }
      [style*="185, 94, 6"] { color: #f8be6c !important; }
      [style*="207, 0, 0"] { color: #fa7b7b !important; }
      [style*="216, 28, 170"] { color: #fab7e6 !important; }
      [style*="144, 19, 254"] { color: #cebcfc !important; }
      [style*="5, 98, 185"] { color: #97cafa !important; }
      [style*="17, 138, 15"] { color: #b9f7b3 !important; }
      [style*="148, 82, 22"] { color: #e0be9d !important; }
      [style*="102, 102, 102"] { color: #b9b9b9 !important; }

      /* Background colors */
      [style*="250, 247, 133"] { background-color: #9b7d44 !important; }
      [style*="255, 240, 219"] { background-color: #993200 !important; }
      [style*="255, 229, 229"] { background-color: #6a2217 !important; }
      [style*="255, 228, 247"] { background-color: #7c3240 !important; }
      [style*="242, 237, 255"] { background-color: #725ead !important; }
      [style*="225, 239, 252"] { background-color: #204166 !important; }
      [style*="228, 248, 226"] { background-color: #175331 !important; }
      [style*="238, 226, 215"] { background-color: #473732 !important; }
      [style*="242, 242, 242"] { background-color: #4d4d4d !important; }

      /* Use body text color for links with only a background color applied */
      [style*="background-color"] {
        color: var(--color-txt);
      }
    }
  }
}