/* Comments Component - Inspired by Fizzy */

.comment {
  --avatar-size: 2.33em;
  --comment-padding-block: var(--block-space-half);
  --comment-padding-inline: var(--inline-space-double);
  --comment-bg-color: var(--color-gray-lightest);

  display: flex;
  margin-block-start: var(--block-space);
  position: relative;

  html[data-theme="dark"] & {
    --comment-bg-color: var(--color-gray-light);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) & {
      --comment-bg-color: var(--color-gray-light);
    }
  }
}

.comment__avatar {
  /* Negative margin makes avatar reach into the comment box */
  margin: calc(var(--comment-padding-block) * 0.75) calc(var(--comment-padding-inline) * -0.75);
  z-index: 1;
}

.comment__avatar .avatar {
  --avatar-size: 2.33em;
}

.comment__content {
  --lexxy-bg-color: var(--comment-bg-color);

  background-color: var(--comment-bg-color);
  border-radius: 0.2em;
  max-inline-size: calc(100% - calc(var(--comment-padding-inline) * 0.75));
  padding:
    var(--comment-padding-block)
    calc(var(--comment-padding-inline) / 2)
    calc(var(--comment-padding-block) * 1.5)
    var(--comment-padding-inline);
  word-wrap: break-word;
  flex: 1;
  min-width: 0;
}

.comment__author {
  margin-block-end: var(--block-space-third);
}

.comment__body {
  text-align: start;

  .action-text-content > :last-child {
    margin-block-end: 0;
  }
}

/* Three dots edit button - hidden until hover */
.comment__edit {
  --btn-size: 1.5rem;

  opacity: 0;
  transition: opacity 150ms ease;
}

.comment:hover .comment__edit {
  opacity: 1;
}

/* New comment form styling */
.comment--new .comment__content {
  background-color: var(--comment-bg-color);
  padding:
    var(--comment-padding-block)
    calc(var(--comment-padding-inline) / 2)
    calc(var(--comment-padding-block) * 1.5)
    var(--comment-padding-inline);
}

.comment--new .comment__body {
  width: 100%;
}

/* Override lexxy-custom.css styles for comments - seamless editor */
.comment--new lexxy-editor {
  --lexxy-bg-color: var(--comment-bg-color);
  --lexxy-color-canvas: var(--comment-bg-color);
  background-color: var(--comment-bg-color);
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-block-size: 6rem;
}

.comment--new lexxy-editor:focus-within {
  box-shadow: none;
  border: none;
}

.comment--new lexxy-toolbar {
  background-color: var(--comment-bg-color);
  border-block-end: 1px solid var(--color-gray);
}

/* Make toolbar buttons transparent so they blend with toolbar background */
.comment--new lexxy-editor button,
.comment--new lexxy-editor summary,
.comment--new .lexxy-editor__toolbar-overflow-menu {
  background-color: transparent;
}

/* Delete button in edit form should be red */
.comment--new .btn--negative {
  --btn-size: 2rem;
}

/* Form buttons row */
.comment--new .comment__actions {
  margin-block-start: var(--block-space-half);
}