@import 'modules/app/viewports';

.post__card {
  @include viewport-mobile {
    max-width: 100%;
  }

  @include viewport-laptop {
    max-width: 100%;
  }

  width: 100%;
  max-width: 680px;

  &.list {
    border: 1px solid lightgray;
  }
}

header.person,
.post__body {
  cursor: pointer;
}

header.person {
  display: flex;
  align-items: flex-end;
}

.person__info {
  margin-left: 10px;

  h4 {
    @include viewport-mobile {
      font-size: 14pt;
    }

    margin: 0 0 5px;
  }
}

.post__modified__small {
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  color: rgb(101 103 107);
}

.post__modified__small {
  display: flex;
  align-items: center;

  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  color: rgb(101 103 107);

  .post__date__raw {
    display: none;
  }

  .post__date__convert {
    display: block;
  }

  /* Вместо mousemove/mouseleave на js */
  &:hover {
    .post__date__raw {
      // display: block;
    }

    .post__date__convert {
      // display: none;
    }
  }
}

.publish {
  @include viewport-mobile {
    top: 0;
    flex-direction: column-reverse;
    align-items: flex-end;

    .viewed__button {
      padding: 6px;
      line-height: 12px;
      border: 1px solid;
    }
  }

  position: absolute;
  top: 12px;
  right: 15px;

  display: flex;
  align-items: center;
}

.cmf-viewed-person {
  position: relative;
  top: 1px;
}

.viewed__eye__icon {
  display: flex;
  padding: 9px 0 8px;
  color: #8c8c8c;

  .viewed__count {
    padding-left: 5px;
  }
}

.post__location__suffix,
.post__location__icon {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.post__location__icon {
  cursor: pointer;
  height: 13px;
}

.post__body__head {
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;

  h5 {
    margin: 15px 0;
  }
}

.post__comments__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 15px;
  padding: 6px 0;

  font-size: 15px;
  color: rgb(101 103 107);

  border-bottom: 1px solid lightgray;
}

.post__comments__count {
  margin-left: auto;
}

::ng-deep .post__comments__preview {
  .text-input-wrapper {
    background-color: rgb(240 242 245) !important;
  }

  .comment-group-body {
    margin-bottom: 5px;
    padding: 10px;
    background-color: rgb(240 242 245);
    border-radius: 20px;

    .message {
      margin-bottom: 10px;
    }
  }
}