/* ==========================================================================
   Config
   ========================================================================== */
$conversation-background-color: $neutral-base-lightest !default;
$conversation-active-background-color: #fff !default;
$conversation-active-shadow-color: rgb(158 158 158 / 17%) !default;
$conversation-active-shadow-size: 0 0 5px 0 !default;
$conversation-border-radius: 4px !default;
$conversation-padding: $layout-spacing-base*0.5 !default;
$conversation-border-width: 1px !default;
$conversation-border-color: $color-border-base !default;
$conversation-comment-body-indentation: (30px + $layout-spacing-base*0.5);
$conversation-comment-body-padding: 0 0 0 $conversation-comment-body-indentation !default;
$conversation-meta-bullet-size: 4px !default;
$conversation-meta-text-size: $typo-size-small !default;
$conversation-meta-text-color: $neutral-base !default;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-conversation {
  position: relative;
  border-radius: $conversation-border-radius;
  border: $conversation-border-width solid transparent;
  margin: $layout-spacing-base*0.5;
  width: 100%;
  cursor: pointer;
  background: $conversation-background-color;

  &.gui-hover,
  &:hover {
    border-color: $conversation-border-color;
    background-color: $neutral-lightest;
  }
}

.gui-conversation__foot {
  display: none;
  padding: $conversation-padding;
}

.gui-conversation__header {
  display: none;

  .gui-toggle-wrapper {
    padding: $layout-spacing-base*0.5;
  }

  .gui-conversation__resolve {
    margin-left: auto;
  }
}

.gui-conversation__resolve {
  text-align: right;
  font-size: $typo-size-slight;

  svg {
    position: relative;
    top: 2px;
    margin: 0 $conversation-padding*0.25 0 0;

    path {
      fill: $neutral-base;
    }
  }

  span {
    color: $neutral-base;
    padding: ($layout-spacing-base*0.5 + 1px) ($layout-spacing-base - 2px);
    display: block;
  }
}

.gui-conversation__resolve-undo {
  position: relative;
  margin-left: $layout-spacing-base*.75;

  &::before {
    content: "";
    position: absolute;
    height: 4px;
    width: 4px;
    border-radius: 5px;
    background: $neutral-base;
    top: 50%;
    left: -$layout-spacing-base*0.5;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

.gui-conversation__comment-list {
  padding: 0;
}

.gui-conversation__comment {
  position: relative;
  display: none;
  padding: $conversation-padding $conversation-padding 0 $conversation-padding;
  margin-bottom: $conversation-padding;

  &:first-child {
    display: block;
  }
}

.gui-conversation__reply-count {
  padding-left: $layout-spacing-base*2;
  margin: -$conversation-padding 0 0;
  font-size: $conversation-meta-text-size;

  .gui-is-active & {
    display: none;
  }
}

.gui-conversation__comment-body {
  margin: -$typo-size-base*0.5 0 0;
  padding: $conversation-comment-body-padding;

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.gui-conversation__text {
  margin: 0;
  font-size: $typo-size-slight;
  padding-right: $layout-spacing-base*0.5;
  color: $neutral-dark;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: pre-line;
  max-height: 120px;
  overflow: hidden;
  position: relative;

  &::after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 87px;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, transparentize($conversation-background-color, 0.5) 50%, $conversation-background-color 100%);
    width: 100%;
    height: 30px;
  }

  .gui-conversation:hover & {
    &::after {
      background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%,transparentize($neutral-lightest, 0.5) 50%, $neutral-lightest 100%);
    }
  }

  .gui-conversation.gui-is-active & {
    max-height: none;

    &::after {
      display:none;
    }
  }

  .gui-mention {
    background: rgba( $primary-purple, .1 );
    padding: $layout-spacing-base*0.1;
    color: $primary-purple;
    font-weight: $typo-weight-semi-bold;
    border-radius: $conversation-border-radius;
  }
}

.gui-conversation__actions {
  white-space: nowrap;
}

.gui-conversation__meta {
  font-size: $conversation-meta-text-size;
  margin: 0 $conversation-padding*0.5 0 0;

  &::after {
    content: "";
    display: inline-block;
    width: $conversation-meta-bullet-size;
    height: $conversation-meta-bullet-size;
    border-radius: $conversation-meta-bullet-size;
    background: $conversation-meta-text-color;
    margin: 0 0 0 $conversation-padding*0.5;
    position: relative;
    top: -2px;
  }

  &:last-child {
    &::after {
      display: none;
    }
  }
}

.gui-conversation__edit-link {
  cursor: pointer;
}

.gui-conversation__focus-fallback {
  position: absolute;
  bottom: 0;
  left: -999em;
}

.gui-conversation__date-text,
.gui-conversation__failed-text {
  color: $conversation-meta-text-color;
  font-size: $conversation-meta-text-size;
}

.gui-conversation__meta-wrapper {
  margin-bottom: $conversation-padding;
  display: none;
}

.gui-conversation__failed--icon,
.gui-is-active .gui-conversation__failed--icon {
  margin-right: 5px;
  vertical-align: sub;

  path {
    fill: $primary-red;
  }
}

.gui-conversation__failed--button {
  margin-left: $layout-spacing-base*0.25
}

.gui-conversation__confirmation-overlay {
  left: $conversation-comment-body-indentation;
}

.gui-conversation__latest-reply .gui-conversation__comment {
  padding-top: 0;
}


/* ==========================================================================
   State Styles
   ========================================================================== */
.gui-is-active.gui-conversation {
  border-color: $conversation-border-color;
  background-color: $conversation-active-background-color;
  box-shadow: $shadow-shallow;
  cursor: default;
  margin-bottom: $layout-spacing-base*3;
}

.gui-is-active .gui-conversation__foot,
.gui-is-active .gui-conversation__comment {
  display: block;
}

.gui-is-active .gui-conversation__header {
  display: flex;
  border-bottom: $conversation-border-width solid $conversation-border-color;

  .gui-conversation__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    border-right: $conversation-border-width solid $conversation-border-color;

    path {
      fill: $neutral-base;
    }
  }
}

.gui-is-active > .gui-conversation__comment-list .gui-conversation__comment {
  margin-bottom: 0;
}

.gui-is-active .gui-conversation__comment,
.gui-show-reply-preview > .gui-conversation__comment-list .gui-conversation__comment {
  position: relative;

  &::before {
    content: ' ';
    border-left: 2px solid $conversation-border-color;
    position: absolute;
    top: $conversation-padding+$avatar-size;
    height: 100%;
    left: ($avatar-size*0.5)+$conversation-padding - 1;
  }
}

.gui-is-active .gui-conversation__comment:last-child {
  border-bottom: $conversation-border-width solid $conversation-border-color;
  padding-bottom: $conversation-padding;

  &::before {
    content: none;
  }
}

.gui-is-active .gui-conversation__meta-wrapper {
  display: block;
  margin-bottom: $conversation-padding;
}

.gui-is-visually-disabled .gui-conversation__person-type,
.gui-is-visually-disabled .gui-conversation__person-name,
.gui-is-visually-disabled .gui-conversation__comment-body {
  background: rgb(255 255 255 / 75%);

  @supports (filter: blur()) {
    transition: filter $animation-time-micro*0.5;
    filter: blur(4px);
    background: none;
  }
}

.gui-is-read-only.gui-conversation {
  .gui-conversation__resolve,
  .gui-conversation__comment:last-child {
    border-bottom: none;
  }
}

.gui-is-active .gui-has-author-type.gui-conversation__comment::before,
.gui-show-reply-preview > .gui-conversation__comment-list .gui-has-author-type.gui-conversation__comment::before {
  margin-top: $layout-spacing-base*0.25 - 1;
  height: calc(100% - #{$layout-spacing-base*0.25 - 1});
}

.gui-has-author-type.gui-conversation__comment {
  .gui-conversation__comment-body {
    margin: -0.1rem 0 0;
  }
}