ernestwisniewski/kbin

$levels: ('#ac5353', '#71ac53', '#ffa500', '#538eac', '#6253ac', '#ac53ac', '#ac5353', '#2b7070ff', '#b9ab52', '#808080ff');
$comment-margin-xl: 1rem;
$comment-margin-lg: .5rem;
$comment-margin-sm: .3rem;

.comment-add {
  .row {
    margin-bottom: 0;
  }

  @include media-breakpoint-down(sm) {
    .params {
      display: block;

      div {
        margin-bottom: 1rem;
      }

      > div:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

.comment {
  display: grid;
  font-size: .9rem;
  grid-gap: .5rem;
  grid-template-areas: "avatar header vote"
                         "avatar body body"
                         "avatar footer footer";
  grid-template-columns: min-content auto min-content;
  margin: .5rem 0;
  padding: 0.5rem 0.75rem;
  position: relative;
  z-index: 2;

  @include media-breakpoint-down(sm) {
    grid-template-areas: "avatar header vote"
                         "body body body"
                         "footer footer footer";
  }

  &:hover,
  &:focus-visible {
    z-index: 5;
  }

  header {
    color: var(--kbin-meta-text-color);
    font-size: .8rem;
    grid-area: header;
    opacity: .75;

    a {
      color: var(--kbin-meta-text-color);
      font-weight: bold;

      time {
        font-weight: normal;
      }
    }
  }

  .content {
    p:last-child {
      margin-bottom: 0;
    }
  }

  aside {
    grid-area: vote;
  }

  div {
    grid-area: body;

    p {
      margin-top: 0;
      margin-bottom: 0.5rem;
    }
  }

  > figure {
    grid-area: avatar;
    display: none;
    margin: 0;

    a {
      display: flex;
    }

    img {
      width: 30px;
      height: 30px;
    }

    @include media-breakpoint-up(sm) {
      img {
        border: var(--kbin-avatar-border);
        width: 40px;
        height: 40px;
      }
    }
  }


  menu {
    column-gap: 1rem;
    display: grid;
    grid-area: meta;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    list-style: none;
    opacity: .75;
    position: relative;
    z-index: 4;

    & > a.active,
    & > li button.active, {
      text-decoration: underline;
    }

    button,
    a {
      font-size: .8rem;
      @include kbin-btn-link;
    }

    li:first-child a {
      padding-left: 0;
    }
  }

  .vote {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;

    button {
      height: 1.2rem;
      width: 4rem;
    }
  }

  footer {
    position: relative;
    color: var(--kbin-meta-text-color);
    font-size: .75rem;
    font-weight: 300;
    grid-area: footer;

    menu, .boosts {
      opacity: .75;
    }

    a {
      @include kbin-btn-link;
    }

    figure {
      margin: 0;
    }

    figure img {
      margin: .5rem 0;
      max-width: 100%;
    }
  }

  .loader {
    height: 20px;
    position: absolute;
    width: 20px;
  }

  &:hover,
  &:focus-within {
    header, menu, footer menu, footer .boosts {
      @include fade-in(.5s, .75);
    }
  }
}

.post-comments {
  blockquote {
    margin: 0;
  }
}

.comments-tree {
  position: relative;

  blockquote {
    margin-top: 0;
  }

  .comment {
    @for $i from 2 to 11 {
      &-line--#{$i} {
        border-left: 1px dashed unquote(nth($levels, $i));
        bottom: 0;
        height: 100%;
        left: $comment-margin-lg * ($i - 1);
        opacity: .4;

        position: absolute;
        z-index: 1;

        @include media-breakpoint-up(xl) {
          left: $comment-margin-xl * ($i - 1);
        }

        @include media-breakpoint-down(sm) {
          left: $comment-margin-sm * ($i - 1);
        }
      }
    }

    @for $i from 2 to 11 {
      &-level--#{$i} {
        border-left: 1px solid unquote(nth($levels, $i));
        margin-left: $comment-margin-lg * ($i - 1) !important;

        @include media-breakpoint-up(xl) {
          margin-left: $comment-margin-xl * ($i - 1) !important;
        }

        @include media-breakpoint-down(sm) {
          margin-left: $comment-margin-sm * ($i - 1) !important;
        }
      }
    }
  }
}

.show-comment-avatar {
  .comment > figure {
    display: block;
  }

  .comment-wrap {
    @include media-breakpoint-up(sm) {
      padding: 1rem 1rem 1rem 1.4rem !important;
      position: absolute !important;
      top: -0.5rem;
      left: -3.5rem;
    }
  }
}

aside.comments {
  position: relative;
}

.entry-comment {
  margin-bottom: 0;
}

#comment-add {
  margin: .5rem 0;
  padding: 0.75rem;
}

.new-comment {
  position: relative;
}

.new-comment::before {
  content: '';
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--kbin-new-comment-color);
  clear: both;
  transform: rotate(225deg);
}