@use "sass:color";

#topic-comments {
  .comments-thread {
    margin-left: 1.5rem;

    .comment {
      position: relative;
      border-radius: var(--bs-border-radius);
      margin: 2rem -0.25rem -0.25rem;
      padding: 0.25rem;
      transition: background-color $transition-speed;
      background-color: var(--bs-body-bg);

      &-header {
        display: flex;
        flex-flow: wrap column;
        line-height: 1.5rem;
        transition: background-color $transition-speed;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--bs-border-color);

        .comment-user {
          display: flex;
          align-items: center;
        }

        .comment-date {
          a {
            font-size: 0.85em;
            color: var(--bs-secondary);
          }
        }

        .comment-link {
          font-size: 0.85em;
          margin-left: 1rem;
        }
      }

      &-text {
        padding: 0.25rem 0;
        border-radius: var(--bs-border-radius);
        word-break: break-word;

        .comment-content {
          @extend %editor-content;
        }
      }

      &-footer {
        display: flex;
        align-items: center;
        padding-top: 0.25rem;
        border-top: 1px solid var(--bs-border-color);

        & > div {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }

        .action {
          display: none;
        }
      }

      &.deleted {
        --bs-border-color: var(--bs-warning-border-subtle);

        color: var(--bs-warning-text-emphasis);
        background-color: rgba(var(--bs-warning-rgb), 0.25);
      }

      &.unseen {
        --bs-border-color: var(--bs-primary-border-subtle);

        background-color: var(--bs-primary-bg-subtle);
      }

      &.blocked {
        opacity: 0.75;

        .comment-user {
          text-decoration: line-through;

          a, span {
            color: inherit !important;
          }
        }
      }
    }

    #comments-form {
      margin-top: 1rem;
    }
  }

  & > .comments-thread {
    margin-left: 0;
  }

  @include media-breakpoint-up(md) {
    .comments-thread {
      .comment {
        &-header {
          align-items: center;
          justify-content: space-between;
          flex-direction: row;
        }

        &-text {
          img {
            max-width: 400px;
          }
        }

        &-footer {
          .btn,
          .user-reactions .button {
            padding: 0;
            font-size: 0.85rem;
          }

          .action {
            display: inline;
            margin-left: 0.25rem;
          }

          .user-reactions .button .btn-link {
            color: inherit;
            text-decoration: none;
          }
        }

        &:not(.deleted) {
          .comment-footer {
            .text-danger {
              opacity: 0;
              transition: opacity $transition-speed;
            }
          }

          &:hover {
            .comment-footer {
              .text-danger {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
}

.widget {
  .comment {
    &-header,
    &-footer {
      display: flex;
      align-items: center;
      color: var(--bs-secondary);
    }

    &-text {
      margin: 0.25rem 0;
    }
  }
}