.comment {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle-1);
  border-radius: var(--radius-200);
  background-color: var(--background-default);

  .comment-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-100);
    padding: 4px 8px;
    background-color: var(--layer-hover-2);
    border-bottom: 1px solid var(--border-subtle-1);
    border-radius: var(--radius-200) var(--radius-200) 0 0;

    > .ds-avatar {
      flex-shrink: 0;
    }

    .meta {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: var(--spacing-050) var(--spacing-100);
      min-width: 0;

      .name {
        @include label-medium-1;
        color: var(--text-primary);
      }

      .timestamp {
        @include helper-small-1;
        color: var(--text-tertiary);
      }
    }

    .buttons {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      gap: var(--spacing-100);
      position: relative;
      z-index: 1;
    }
  }

  .comment-body {
    padding: var(--spacing-200) var(--spacing-150);
    background-color: var(--background-default);
    border-radius: 0 0 var(--radius-200) var(--radius-200);

    .text {
      @include body-medium-1;
      color: var(--text-primary);
      word-break: break-word;

      .wmde-markdown {
        background: transparent;
        font-size: inherit;
        color: inherit;

        p {
          margin: 0 0 var(--spacing-100);

          &:last-child {
            margin-bottom: 0;
          }
        }

        pre,
        code {
          border-radius: var(--radius-100);
        }

        pre {
          overflow-x: auto;
        }

        ul,
        ol {
          margin: 0 0 var(--spacing-100);
          padding-left: var(--spacing-250);
        }
      }
    }

    .meta-line {
      @include helper-small-1;
      color: var(--text-tertiary);
      margin-top: var(--spacing-100);
    }
  }
}