@use '@angular/material' as mat;
@import "./../../lib/scss/sc-variables";
@import "./../../lib/scss/sc-mixins";

:host {
  height: 100%;
}

.comments {
  height: 100%;

  &__wrapper {
    // max-height: calc(var(--app-height) - #{$header-height} - (#{$content-padding} * 2) - 48px - 48px - 54px);
    display: flex;
    flex-direction: column;
    padding: $comments-wrapper-padding;
    gap: $comments-wrapper-gap;
    height: calc(100% - 48px);
    overflow: auto;
  }

  &__footer {
    width: 100%;
    height: 48px;
    @include mat.elevation(6);
    // border-top: 1px solid;
  }

  &-card {
    border: 1px solid;
    border-radius: $comments-card-border-radius;

    &__header {
      display: flex;
      align-items: center;
      gap: $comments-card-padding;
      border-bottom: 1px solid;
      padding: $comments-card-padding;
    }

    &__header-pic {
      flex: 0 0 40px;
    }

    &__header-text {
      flex: 1;
      margin-bottom: 0 !important;
      width: calc(
        100% - #{$comments-card-header-pic-width} - (#{$comments-card-padding} *
              2)
      );
    }

    &__subject {
      padding: $comments-card-padding $comments-card-padding $comments-card-padding 56px;
      margin: 0;
      border-bottom: 1px solid;
    }

    &__body {
      padding: $comments-card-padding;

      ::ng-deep p:last-child {
        margin-bottom: 0 !important;
      }
    }

    &__footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border-top: 1px solid;

      .mat-icon-button {
        border-radius: 0;

        &:last-child {
          border-bottom-right-radius: $comments-card-border-radius;
        }
      }
    }
  }

  &__replies-wrapper {
    padding-left: 48px;
    display: flex;
    flex-direction: column;
    gap: $comments-wrapper-gap;
  }

  &__add-comment {
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}