@import (reference) '../IconButton.less';

.CIG-comments {
  .Icon.is-s;
  .IconButton;

  --IconButton-name: 'chat';

  margin-left: var(--gap-xs);
  order: 1;
  text-decoration: none;
  visibility: hidden;
}

.Conversation-workflow {
  display: none;
  padding: var(--gap-m) var(--gap-m) 0;

  .ProseMirrorContainer {
    min-height: 275px;
    padding-bottom: 0;
  }
}

.Conversation-add-comment {
  margin-top: var(--gap-m);
  width: 100%;
}

.Popup[name^='conversation-edit-post'] {
  .Popup-close {
    background: var(--color-gray2);
    left: calc(
      var(--Tether-rl) + var(--Tether-rw) - var(--gap-l) - var(--gap-m) -
        var(--Icon-size)
    );
  }

  .Widget-actions {
    left: calc(
      var(--Tether-rl) + var(--Tether-rw) - (var(--Icon-size) * 2) -
        (var(--gap-xl) * 2) - var(--gap-m)
    );
    padding-left: var(--gap-l);
    position: fixed;

    .Widget-actionsToggle {
      .IconButton();

      background: linear-gradient(
        to right,
        rgb(255 255 255 / 0%),
        var(--color-gray2) calc(var(--gap-xs) + 4px)
      );
    }
  }
}

.Popup[name^='conversation-edit-post-history'] .Widget-actions {
  display: none;
}

.Popup-content {
  .Conversation-earlier {
    .Conversation-post {
      &:last-child {
        border-bottom: 1px solid var(--color-gray2);
      }
    }
  }
}

.ContentEdit-right {
  .Conversation {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;

    > .Conversation-posts {
      overflow-y: scroll;
      padding: 0 var(--Widget-padding);
    }

    .Message {
      margin: var(--gap-m) 0;
    }
  }

  .Conversation-pinned {
    margin-bottom: var(--gap-m);
    padding: var(--gap-m);
  }

  .Conversation-date {
    top: 0;

    &:first-child {
      border-top: none;
    }
  }

  .Conversation-avatar {
    top: var(--gap-m);
  }

  .Conversation-header {
    padding-left: calc(var(--Avatar-size));
  }

  .Conversation-user {
    .Text.is-s;

    display: block;
    margin: unset;
    padding-top: var(--gap-xs);
  }

  .Conversation-text {
    margin-top: var(--gap-s);

    img {
      max-width: 100%;
    }
  }

  .Conversation-post {
    background: var(--color-gray1);
    margin: var(--gap-m) 0;
    padding: var(--gap-s) var(--gap-m) var(--gap-m) var(--gap-m);

    &:not(:last-child) {
      border-bottom: 0;
    }
  }

  .Conversation-newPost {
    margin: unset;
  }
}

.Conversation-pinned {
  background: var(--color-gray1);
  margin: 0 calc(0px - var(--Widget-padding));
  padding: var(--Widget-padding);

  &-reply {
    margin-bottom: var(--Widget-padding);

    .Conversation-post:first-child {
      margin-top: 0;
    }
  }
}

.Conversation-earlier {
  .Button:not(.Conversation-actionsToggle) {
    margin: var(--Widget-padding) 0;
  }
}

.Conversation-date {
  .Text.is-s;

  background: var(--color-white);
  border-color: var(--color-gray2);
  border-style: solid;
  border-width: 1px 0;
  font-weight: bold;
  margin: 0 calc(0px - var(--Widget-padding));
  padding: var(--gap-m) var(--gap-l);
  position: sticky;
  top: calc(var(--gap-m) * 2 + var(--Text-height));
  z-index: 11;
}

.Conversation-post {
  border-bottom: 1px solid var(--color-gray2);
  padding: var(--gap-m) var(--gap-m) var(--gap-m)
    calc(var(--Avatar-size) + var(--gap-l));
  position: relative;

  &.is-pinned > .Conversation-avatar {
    top: calc((var(--gap-m) * 3) + var(--gap-s));
  }

  &:last-child,
  &:has(+ .Conversation-date) {
    border-bottom: none;
  }

  &:first-child {
    margin-top: var(--gap-l);
  }
}

.Conversation-avatar {
  left: var(--gap-s);
  position: absolute;
  top: calc(var(--gap-m) * 2);
}

.Conversation-header {
  align-items: center;
  display: flex;
  gap: var(--gap-s);
}

.Conversation-metadata {
  flex-grow: 1;
  overflow: hidden;
}

.Conversation-user {
  display: inline;
  font-weight: bold;
  margin-right: var(--gap-s);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Conversation-time {
  margin-right: var(--gap-xs);
}

.Conversation-time,
.Conversation-position {
  .Text.is-s;

  color: var(--color-gray5);
  display: inline;
}

.Conversation-edit,
.Conversation-reply,
.Conversation-resolve,
.Conversation-unresolve,
.Conversation-pin {
  .IconButton;

  color: var(--color-black);
}

.Conversation-edit {
  --IconButton-name: 'edit';
}

.Conversation-reply {
  --IconButton-name: 'reply';

  align-items: center;
  display: inline-flex;
  flex-direction: row-reverse;
  text-decoration: none;
  width: auto;

  &::before {
    height: calc(var(--gap-s) * 2 + var(--Icon-size));
    padding: var(--gap-s);
    width: calc(var(--gap-s) * 2 + var(--Icon-size));
  }

  &:not(:empty) {
    padding-left: var(--gap-s);
  }

  &-main {
    padding: var(--gap-m) var(--gap-m) var(--gap-m)
      calc(var(--Avatar-size) + var(--gap-l));
    position: relative;
  }

  &-date {
    color: var(--color-gray5);
    display: inline;
    font-size: var(--fontSize-s);
    margin-right: var(--gap-xs);
  }

  &-count {
    border-bottom: 1px solid var(--color-gray3);
    margin: var(--gap-m) calc(0px - var(--Widget-padding));

    &-text {
      color: var(--color-gray5);
      font-weight: bold;
      margin: var(--gap-m) 0;
      padding: 0 var(--gap-l);
    }
  }
}

.Conversation-pin {
  --IconButton-name: 'push_pin';
}

.Conversation-text {
  margin-top: calc(0px - var(--gap-s) + var(--gap-xs));

  b {
    font-weight: bold;
  }

  i {
    font-style: italic;
  }

  img {
    max-height: 30vh;
    max-width: 50%;
  }

  u {
    text-decoration: underline;
  }

  s {
    text-decoration: line-through;
  }

  ol,
  ul {
    margin-left: var(--gap-l);
  }

  ol {
    list-style: decimal;
  }

  ul {
    list-style: disc;
  }

  &[data-edited]::after {
    .Text.is-s;

    color: var(--color-gray5);
    content: ' ' attr(data-edited);
    font-style: italic;
  }

  &[data-workflow-transition]::after {
    .Text.is-s;

    color: var(--color-gray5);
    content: ' ' attr(data-old-workflow-state) ' ' 'trending_flat' ' '
      attr(data-new-workflow-state);
  }
}

.Conversation-newPost {
  background: var(--color-white);
  border-top: 1px solid var(--color-gray2);
  margin: var(--gap-l) calc(0px - var(--Widget-padding))
    calc(0px - var(--Widget-padding)) calc(0px - var(--Widget-padding));
  padding: var(--Widget-padding);

  .CIG-small {
    margin-top: 0;
  }

  .Mention .CIG-wordCount {
    display: none;
  }
}

.Conversation-post-workflowTransition {
  .Text.is-s;

  color: var(--color-gray6);
  font-size: var(--fontSize-s);
  line-height: var(--lineHeight-m);
  padding: var(--gap-xs) calc(0px - var(--iconSize-s) * 3 - var(--gap-s) * 6) 0
    0;
}

.Conversation-workflowStateIcon::before {
  .Icon;

  content: ' ' 'trending_flat' ' ';
  padding: calc(var(--gap-xs) - 2px) var(--gap-xs) 0;
}

.Conversation-newPostButton {
  .Button.is-dominant;
}

.Popup[name='Contextual-comments'] {
  &:has(.Conversation-pinned-container) {
    .Conversation-date {
      top: calc(var(--gap-m) * 2 + var(--Text-height));
    }
  }

  .Conversation {
    margin-top: 0;
  }

  .Conversation-avatar {
    top: calc(var(--gap-m) * 3);
  }

  .Conversation-date {
    top: calc(var(--Text-height) + var(--gap-xs));
  }

  .Conversation-pinned-by {
    margin: 0;
  }

  .Conversation-pinned-container {
    margin-bottom: calc(var(--gap-m) * 3);

    h1 {
      background: var(--color-gray2);
      color: var(--color-black);
      cursor: pointer;
      font-weight: 700;
      padding: var(--gap-m);
      position: relative;

      &::after {
        .Icon;

        content: 'expand_more';
      }
    }

    .Conversation-pinned-list {
      display: none;
    }
  }

  .Conversation-pinned-container.is-expanded {
    h1 {
      cursor: pointer;
      position: relative;

      &::after {
        .Icon;

        content: 'expand_less';
      }
    }

    .Conversation-pinned-list {
      display: block;
      overflow-y: hidden;
    }
  }

  .Popup-content {
    max-height: 580px;
    max-width: 100%;
    width: auto;
  }
}

.Conversation-pinned-by {
  color: var(--color-yellow4);
  font-size: var(--fontSize-m);
  margin: var(--gap-s) 0;

  &::before {
    .Icon;

    --Icon-fill: 'FILL' 0;

    content: 'push_pin';
    font-size: var(--fontSize-l);
    padding-top: var(--gap-xs);
    transform: rotate(45deg);
  }
}

.Conversation-context {
  color: var(--color-gray5);
  font-size: var(--fontSize-xs);

  span:not(:first-child) {
    &::before {
      content: ' • ';
    }
  }
}

.Conversation-action-container {
  .Dropdown .Dropdown-item {
    padding: var(--gap-m);
  }

  .Conversation-pin::before,
  .Conversation-edit::before {
    content: none;
  }
}

.Conversation-resolve {
  --IconButton-name: 'check_small';
}

.Conversation-unresolve {
  --IconButton-name: 'check_circle';
}

.Conversation-posts .Widget-filters {
  margin-top: 0;
}

.Conversations-resolved-toggle {
  .Checkbox;
  .Checkbox.is-toggle;

  text-decoration: none;

  &:hover {
    text-decoration: none;
  }

  &.is-active {
    text-decoration: none;

    &::after {
      color: var(--Link-hoverColor);
      content: 'toggle_on';
    }

    &:hover::before {
      background: var(--Link-hoverColor);
    }
  }
}

.Conversation-action-buttons {
  display: flex;
  gap: var(--gap-m);
}
