@layer components {
  /* 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);
  }

  /* 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);
  }
}