.Conversation {
  --post-form-h: 198px; /* this magic number is the approx height of the post form to reduce the jittering of the height while the RTE renders. */
  @apply !col-[fullbleed-start_/_fullbleed-end] grid min-h-0 grid-rows-[minmax(0px,1fr)_minmax(var(--post-form-h),auto)];
}

.Conversation-pinned {
  @apply border-b border-b-gray-200;
}

.Conversation-earlier {
  @apply contents;

  > .Conversation {
    @apply contents;
  }

  .Conversation-posts {
    @apply contents;

    .Conversation-post {
      @apply last:border-b;
    }
  }

  &:has(> .Button) {
    @apply flex justify-center border-b border-b-gray-200 py-2;

    .Button {
      @apply btu-button btu-button-fill-none btu-button-primary btu-button-sm text-sm before:btu-icon before:btu-icon-history [&:not(.Popup-content_>)]:btu-button-fill-none;
    }
  }
}

.Conversation-date {
  @apply sticky top-0 z-[1] content-center border-b border-b-gray-200 bg-gray-50 px-4 py-3 text-xs font-medium text-gray-500;
}

.Conversation-post,
.Conversation-reply-main {
  @apply grid grid-cols-[auto_minmax(0px,1fr)] grid-rows-[auto_1fr] gap-2 p-4 @container hover:bg-gray-50 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-b-gray-200;

  &.is-pinned {
    @apply bg-warning-25 hover:bg-warning-50;

    .Conversation-pin {
      @apply btu-button-warning;
    }
  }

  &.is-resolved {
    @apply bg-teal-50 hover:bg-teal-50;
  }
}

.Conversation-posts.is-empty > .Conversation-context {
  @apply m-4;
}

.Conversation-posts > .Message {
  @apply m-4;
}

.Conversation-header {
  @apply flex justify-between gap-4;
}

.Conversation-metadata {
  @apply overflow-hidden;
}

.ContentEdit-right .Conversation-post.is-fielded {
  .Conversation-avatar,
  .Conversation-metadata,
  .Conversation-context,
  .Conversation-text {
    @apply hover:cursor-pointer;
  }
}

.Conversation-user {
  @apply truncate text-sm font-medium text-gray-900;
}

.Conversation-time {
  @apply inline text-xs text-gray-500;
}

.Conversation-position {
  @apply ms-[0.375rem] inline text-xs font-normal text-gray-500;
}

.Conversation-post-workflowTransition {
  @apply col-span-full flex items-center gap-2 text-xs text-gray-700;
}

.Conversation-workflowStateIcon {
  @apply flex before:btu-icon before:btu-icon-arrow-right before:font-semibold before:text-gray-500 before:btu-icon-xs;
}

.Conversation-text {
  @apply col-span-full break-words text-sm text-gray-900 after:text-xs after:italic after:text-gray-500 [&[data-edited]]:after:[content:'_'_attr(data-edited)];

  a:has(img) {
    @apply mx-auto my-2 blokk max-w-fit rounded-lg rounded-ss-none border border-solid border-gray-200 bg-white px-3 py-2 hover:bg-gray-100;

    img {
      @apply max-h-[50dvh] rounded-lg @lg:max-w-[75cqi];
    }
  }

  ol {
    @apply list-decimal ps-4;
  }

  ul {
    @apply list-disc ps-4;
  }

  /* TODO: remove when Highlight.less gets converted? */
  .Highlight {
    @apply rounded bg-primary-50 text-primary-800;
  }
}

.Conversation-reply {
  @apply btu-button btu-button-fill-none btu-button-primary btu-button-sm col-span-2 mt-2 justify-self-start btu-button-container-none after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:pt-[.15rem];
}

/* TODO: revisit newPost when ProseMirror is styled */
.Conversation-newPost {
  @apply flex flex-col items-end gap-4 border-t border-t-gray-200 p-4;
}

.Conversation-newPost .ProseMirrorContainer {
  @apply bg-white;
}

.Conversation-newPostButton {
  @apply btu-button btu-button-text-hidden btu-button-primary btu-button-sm before:btu-icon before:btu-icon-send-horizontal;
}

/* Conversation comment in workflow popup */
.Conversation-workflow {
  @apply hidden;
}

/*****************************/
/****** One-off styles *******/
/*****************************/

/* Right rail placement */
.ContentEdit-right.is-visible {
  &:has(.Conversation) {
    @apply grid grid-rows-[auto_minmax(0px,1fr)];

    > .frame {
      @apply contents;
    }
  }

  .Conversation-posts {
    @apply overflow-y-auto;
  }
}

.Conversation-delete.Dropdown-item {
  @apply text-error-700;
}

.Conversation-pinned-by {
  @apply col-span-full text-xs font-medium text-warning-700 before:btu-icon before:btu-icon-pin before:me-1 before:rotate-[50deg];
}

/* Contextual comments */
.Popup[name='Contextual-comments'] {
  .Conversation-earlier:has(> .Button) {
    @apply my-0 p-4;

    .Button {
      @apply btu-button btu-button-gray z-[2];
    }
  }

  .Conversation-posts {
    @apply max-h-[calc(100vh-3.3rem)] overflow-y-auto;
  }

  .Conversation-posts:has(.Conversation-pinned-container) {
    .Conversation-date {
      @apply top-11;
    }
  }

  .Conversation-pinned-container {
    @apply sticky top-0 z-10;

    h1 {
      @apply btu-heading-6 flex cursor-pointer items-center justify-between border-b border-b-gray-200 bg-white px-4 py-2 after:btu-button after:btu-button-text-hidden after:btu-button-fill-none after:btu-button-gray after:btu-button-xs after:btu-icon after:btu-icon-chevron-down touch-device:after:btu-button-sm;
    }

    .Conversation-pinned-list {
      @apply hidden;
    }
  }

  .Conversation-pinned-container.is-expanded {
    h1 {
      @apply after:btu-icon-chevron-up;
    }

    .Conversation-pinned-list {
      @apply blokk max-h-[300px] overflow-y-auto;
    }
  }

  .Conversation {
    @apply flex min-h-max flex-col;
  }
}

.Popup[name='conversation-reply'] {
  .Conversation {
    @apply flex flex-col;

    .Conversation-posts {
      @apply overflow-y-visible;
    }
  }
}

.Conversation-context {
  @apply col-span-full text-xs font-normal text-gray-500;

  span:not(:first-child):not(:empty) {
    @apply before:[content:'_•_'];
  }
}

.Conversation-actionsToggle {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-ellipsis touch-device:btu-button-sm before:btu-icon-md;
}

.Conversation-resolve,
.Conversation-unresolve {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white touch-device:btu-button-sm;
}

.Conversation-resolve {
  @apply hover:text-success-700;
}

.Conversation-unresolve {
  @apply text-success-700;
}

.Dropdown.is-open {
  @apply Dropdown-is-open;
}

/* Reply popup */
.Popup-content {
  .Conversation {
    .Conversation-posts {
      @apply overflow-y-auto;
    }
  }

  .Widget-title + .Conversation-posts {
    @apply !col-[fullbleed-start_/_fullbleed-end];
  }

  .Conversation-reply-date {
    @apply me-1 inline text-xs text-gray-500;
  }

  .Conversation-reply-main {
    @apply bg-primary-50;

    .Conversation-user {
      @apply text-primary-800;
    }
  }

  .Conversation-reply-count {
    @apply border-b border-b-gray-200 p-4 text-sm font-medium text-gray-500;
  }

  .Conversation-earlier:has(> .Button) {
    @apply -my-[18px] border-b-0 p-0;

    .Button {
      @apply btu-button btu-button-gray z-[2];
    }
  }
}

.Conversation-action-container {
  @apply flex gap-2;
}

.Conversation-action-buttons {
  @apply flex items-center gap-2;
}

.Conversation-resolveThread {
  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray btu-button-sm after:btu-icon after:btu-icon-circle-check-big;
}

.Conversations-resolved-toggle {
  @apply Checkbox-toggle me-2;
}

.Conversation-action-container
  .Conversation-resolve.is-animating
  btu-icon[symbol='check-circle']
  svg
  path:last-of-type {
  @apply stroke-primary-600 [animation:animateDash_1s_ease-in_forwards] [stroke-dasharray:100] [stroke-dashoffset:100];
}

@keyframes animateDash {
  to {
    stroke-dashoffset: 0;
  }
}
