@use "sass:math";

.comment {
  $image-size: $form-element-height;
  $gap: spacer(3);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: $gap;
  position: relative;

  > .body {
    display: grid;
    gap: $gap;
    position: relative;
    white-space: pre-wrap;
  }

  &:has(.comment) > .body::before {
    content: "";
    position: absolute;
    left: -(math.div($image-size, 2) + $gap);
    height: calc(100% - #{$image-size});
    top: $image-size;
    border-left: $border;
  }

  & > * {
    grid-column: 2;
  }

  .user-avatar {
    height: $image-size;
    width: $image-size;
    grid-column: 1;
    grid-row: 1/3;
  }

  header {
    display: flex;
    gap: $gap;
    align-items: center;
    flex-wrap: wrap;

    .user-name {
      font-weight: bold;
      text-decoration: none;
    }
  }

  .comment {
    $margin-y: spacer(5);
    margin-top: $margin-y;
    margin-left: -(math.div($image-size, 2));
    max-width: unset;

    &:not(:last-child)::before {
      content: "";
      height: 100%;
      left: -$gap;
      position: absolute;
      border-left: $border;
    }

    &::after {
      content: "";
      position: absolute;
      top: -($margin-y + $gap);
      right: 100%;
      width: $gap - $border-width;
      border-bottom: $border;
      border-left: $border;
      height: math.div($image-size, 2) + $margin-y + $gap;
      border-bottom-left-radius: border-radius(2);
    }
  }
}
