@use "sass:color";

.chat-message[data-theme] {
  background: unset;
  @include dui-app;
  background: var(--window-app-background);
  border: var(--window-app-border-width) solid var(--window-app-border-color);
  // --color-text-light-6: var(--color-secondary-4);
  // --color-text-dark-secondary: var(--text-color-4); // 5 is too dark on colored message backgrounds

  > .message-content .message-buttons button .cue i {
    --fa-primary-color: var(--text-color-1);
    --fa-secondary-color: var(--text-color-3);
  }

  // &.whisper {
  //   border-color: var(--color-secondary-1);
  //   background: var(--color-secondary-3-75);
  //   &.blind {
  //     border-color: var(--scrollbar-thumb-border-color);
  //     background: var(--color-primary-3-75);
  //   }
  // }

  .message-content {
    text-shadow: 0px 1px 1px black;
  }

  .pf2e.chat-card .card-header h3 {
    font-family: var(--serif);
    font-size: x-large;
    line-height: 1.3rem;
    color: var(--text-color-2);

    &.pf2-icon {
      font-family: "Pathfinder2eActions", sans-serif;
      flex: 0;
      margin-right: 5px;
    }
    // .action-glyph {
    //   display: none;
    // }
  }

  .pf2e.chat-card .card-footer span {
    border-right: 1px solid var(--color-secondary-4);
    &:last-child {
      border: unset;
    }
  }

  .table-draw .table-results .table-result img.result-image {
    @include dui-app;
    border: 1px solid var(--icon-border-color);

    &[src$=".svg"] {
      background-color: white;
    }
  }

  // .dice-tooltip .dice-rolls .roll.success,
  // .dice-tooltip .dice-rolls .roll.max {
  //   color: var(--degree-success-critical);
  //   filter: unset;
  // }
  // .dice-tooltip .dice-rolls .roll.failure,
  // .dice-tooltip .dice-rolls .roll.min {
  //   color: var(--degree-failure-critical);
  //   filter: sepia(0.5) hue-rotate(-60deg);
  // }

  .dice-tooltip .dice-rolls .roll.d20 {
    text-shadow: none;
    // text-shadow: 0px 1px 2px black;
  }

  .message-content .damage-roll .dice-result .dice-tooltip .instance {
    border-radius: var(--border-radius);
  }

  & > .message-content .dice-roll .dice-result > [data-visibility="gm"] {
    border: 2px dotted var(--visibility-gm-bg);
    background: transparent;
    box-shadow: unset;
  }

  &[data-color-scheme="light"] > .message-content .dice-roll .dice-result > [data-visibility="gm"] {
    border: 2px dotted black;
  }

  &[data-color-scheme="dark"] > .message-content .dice-roll .dice-result > [data-visibility="gm"] {
    border: 2px dotted var(--visibility-gm-bg);
  }

  [data-action="delete-template"] {
    @include dui-button-bright;
  }

  .dice-roll .dice-formula,
  .dice-roll .dice-total {
    @include dui-app;
    button {
      @include dui-button-bright;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .dice-tooltip .part-header .part-total {
    @include dui-app;
    box-shadow: unset;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: unset;
  }

  .pf2e.chat-card header,
  .pf2e.chat-card .card-header {
    border: unset;
    img {
      @include dui-app;
      border: 1px solid;
      border-color: var(--icon-border-color);
    }
  }

  > .message-content > div > h4 > img,
  > .message-content .participant-conditions ul li img {
    @include dui-app;
    border: 1px solid;
    border-color: var(--icon-border-color);
  }

  .pf2e.chat-card .addendum {
    color: var(--text-color-3);
  }

  .pf2e.chat-card footer,
  .pf2e.chat-card .card-footer {
    border-top: 1px solid var(--app-border-color);
    margin: 0px -5px;
    padding: 0px 5px;
    span {
      border-right: 1px solid var(--app-border-color);
    }
  }
}

.chat-message:not([data-theme^="crb"]) {
  .pf2e.chat-card .addendum {
    border-radius: var(--border-radius);
    border: 1px solid var(--fieldset-border-color);
    background: var(--fieldset-background-color);
  }
}

/* ----------------------------------------- */
/* Damage buttons                            */
/* ----------------------------------------- */

.chat-message[data-theme] {
  .flavor-text {
    hr {
      display: none;
    }
  }
  .card-content {
    hr {
      margin-left: -5px;
      margin-right: -5px;
    }
  }
  .pf2e.chat-card .card-buttons .spell-attack-buttons,
  .pf2e.chat-card .card-buttons .spell-button {
    gap: 3px;
  }
}

.chat-message[data-theme] {
  .persistent-damage-recovery {
    margin-top: 4px;
    hr {
      display: none;
    }
  }
}

.message[data-theme]:not(
    [data-theme^="crb"][data-color-scheme="light"],
    [data-theme^="dnd5e2"][data-color-scheme="light"]
  ) {
  // .message-content {
  .target-damage-application,
  .damage-application {
    img {
      filter: invert(1) brightness(0.7) sepia(1) grayscale(0.7) drop-shadow(0px 1px 1px black);
    }
    button:hover {
      img {
        filter: invert(1) drop-shadow(0px 1px 1px black);
      }
    }
  }
  // }
}

.message[data-theme] {
  // .message-content {
  .target-damage-application,
  .damage-application {
    gap: 3px;
    margin-top: 3px;
    text-rendering: geometricPrecision;

    button {
      margin: 0px;

      &.half-damage {
        .transparent-half {
          display: none;
        }
        .fa-heart-broken {
          position: relative;
          -webkit-text-fill-color: unset !important;

          &::before {
            opacity: 0.5;
          }

          &::after {
            content: "\f7a9";
            font-family: "Font Awesome 5 Free";
            display: block;
            z-index: 1;
            opacity: 1;
            position: absolute;
            top: 0px;
            left: 2.4px;
            clip-path: polygon(45% 0%, 50% 100%, 100% 100%, 100% 4%);
          }
        }
      }

      &[data-action="target-shield-block"],
      &[data-action="shield-block"] {
        &:hover {
          background-color: var(--color-secondary-2);
          border: var(--app-border-width) solid;
          border-color: var(--color-secondary-1);
        }
        &.shield-activated {
          color: var(--dui-button-hover-text-color);
          background-color: var(--color-secondary-1);
          border: var(--app-border-width) solid;
          border-color: var(--color-secondary-2);
          &:hover {
            background-color: var(--color-secondary-2);
            border: var(--app-border-width) solid;
            border-color: var(--color-secondary-1);
          }
        }
      }

      &[data-action="target-apply-healing"],
      &[data-action="apply-healing"] {
        .fa-stack i.fa-plus {
          --fa-inverse: white;
          text-shadow: none;
        }

        &:hover {
          background-color: var(--color-level-success);
          border-color: var(--color-level-success-border);

          .fa-stack i.fa-plus {
            --fa-inverse: var(--color-level-success);
            text-shadow: none;
          }
        }
      }
    }
    // }
  }
}

/* ----------------------------------------- */
/* Header                                    */
/* ----------------------------------------- */

.chat-message[data-theme] .message-header {
  border-radius: var(--border-radius) var(--border-radius) 0px 0px;

  .player-name,
  .message-sender {
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .portrait-and-name {
    flex-grow: 1;
    display: flex;
    flex-basis: 100px;
    gap: 5px;

    .portrait-wrapper {
      width: var(--avatar-size);
      display: flex;
      flex: none;
      justify-content: center;
      align-items: center;

      .portrait {
        height: var(--avatar-size);
        object-fit: contain;
        z-index: 0;

        &.actor {
          border-radius: 3px;
        }
      }
    }

    .sender-wrapper {
      display: flex;
      gap: 3px;
      flex-direction: column;
      justify-content: left;
      align-self: center;
      z-index: 1;

      .message-sender,
      .player-name {
        align-self: flex-start;
        line-height: initial;
      }
    }
  }
}

/* ----------------------------------------- */
/* System overwrites                         */
/* ----------------------------------------- */

[data-theme] {
  &.chat-message > .message-content ul.participant-conditions {
    border: unset;
    box-shadow: unset;
    li img {
      @include dui-app;
    }
  }

  &.chat-message .message-content .damage-taken button.revert-damage {
    @include dui-button;
  }

  &.chat-message.emote > .message-content p.action-content img {
    @include dui-app;
    border: 1px solid;
    border-color: var(--icon-border-color);
  }

  .dice-roll .dice-total.success {
    color: var(--degree-success-critical) !important;
  }
  .dice-roll .dice-total.failure {
    color: var(--degree-failure-critical) !important;
  }
}
