src/components/NoteHeader/NoteHeader.scss
@import '../../constants/styles';
@import '../../constants/note';

.NoteHeader {
  padding-inline-end: 12px;
  position: relative;
  flex: 1;
  color: var(--text-color);
  display: flex;

  @include ie11 {
    flex: none;
  }

  .type-icon {
    margin: 2px;
    width: 24px;
    height: 24px;
  }

  .type-icon-container {
    padding-inline-end: 13px;

    .unread-notification {
      position: absolute;
      width: 13px;
      height: 13px;
      inset-inline-end: -2px;
      inset-block-start: -2px;
      border-radius: 10000px;
      border: 2px solid var(--component-background);
      background: $pdftron-blue;
    }
  }

  .author-and-date {
    flex: 1;
    min-width: 0;
    position: relative;

    &.isReply {
      padding-inline-start: 0px;
      padding-top: 0px;
      font-size: 10px;
    }

    .author-and-overflow {
      display: flex;
      justify-content: space-between;

      .author-and-time {
        display: flex;
        flex-direction: column;
        word-break: break-word;

        .author {
          font-weight: bold;
          font-size: 13px;
        }

        .date-and-num-replies {
          display: flex;

          .date-and-time {
            font-size: 10px;

            @include mobile {
              font-size: 10px;
            }

            color: var(--faded-text);
          }

          .num-replies-container {
            display: flex;
            flex-grow: 1;
            padding-inline-start: 10px;

            .num-reply-icon {
              height: 12px;
              width: 12px;
            }

            .num-replies {
              font-size: 10px;
              color: var(--gray-7);

              @include mobile {
                font-size: 12px;
              }
            }
          }
        }
      }

      .state-and-overflow {
        display: flex;
        flex: 1;
        justify-content: flex-end;

        > * {
          pointer-events: auto;
        }

        .tracked-change-icon-wrapper {
          .tracked-change-icon {
            margin: 2px;
            width: 24px;
            height: 24px;
          }

          &:hover {
            &.accept {
              background-color: #d5f5ca;
            }

            &.reject {
              background-color: #ffe8e8;
            }
          }
        }

        .ToggleElementButton button {
          width: 28px;
          height: 28px;
          margin: 0 8px 0 13px;

          .Icon {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }

  .author-name {
    font-weight: bold;
  }

  .note-popup-toggle-trigger {
    padding: 0px;
    margin-inline-end: 0px !important;
    margin-inline-start: 0px !important;
    min-width: 28px !important;
    .Icon {
      width: 24px !important;
      height: 24px !important;
    }
  }
}

.parent {
  padding-inline-start: 12px;
  padding-top: 12px;
}
