.comment-details-modal {
  width: 36vw;

  > .body {
    padding: 32px 16px;
  }

  .comment-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
    min-width: min(480px, 80vw);
  }

  .comment-details-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-150);
  }

  .comment-details-section-title {
    @include label-medium-1;
    color: var(--text-secondary);
  }

  .comment-details-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-150);
  }

  .comment-details-author-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
    min-width: 0;
    flex: 1;
  }

  .comment-details-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-050) var(--spacing-100);
  }

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

  .comment-details-value {
    @include body-medium-1;
    color: var(--text-primary);
  }

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

  .comment-details-author-meta .comment-details-value {
    @include label-medium-1;
  }

  .comment-details-requested {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-150);
  }

  .comment-details-requested-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-150);
  }

  .comment-details-requested-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
    min-width: 0;
    flex: 1;
  }
}