src/components/InlineCommentingPopup/InlineCommentingPopup.scss
@import '../../constants/styles.scss';
@import '../../constants/popup';

.InlineCommentingPopup {
  @extend %popup;
  border-radius: 4px;
  box-shadow: 0 0 3px 0 var(--document-box-shadow);
  background: var(--component-background);
  align-items: flex-start;

  @include mobile {
    position: fixed;
    inset-inline-start: 0;
    inset-block-end: 0;
    z-index: 100;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    background: var(--modal-negative-space);
  }

  @include tablet-and-desktop {
    overflow: auto;
    max-height: calc(100% - 100px);
  }

  .inline-comment-container {
    display: flex;
    flex-direction: column;

    @include mobile {
      flex-basis: auto;
      width: 100%;
      max-height: 40%;
      background: var(--component-background);
      box-shadow: 0 0 3px 0 var(--document-box-shadow);
      border-radius: 4px 4px 0px 0px;
    }

    @include tablet-and-desktop {
      width: 260px;
    }

    &.expanded {
      @include mobile {
        flex-grow: 1;
        max-height: 90%;
      }
    }

    .inline-comment-header {
      flex-grow: 0;
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;

      .inline-comment-header-title {
        flex-grow: 1;
        font-size: 16px;
      }

      .Button {
        margin: 4px;
      }
    }
  }

  .Note {
    border-radius: 0;
    background: none;
    margin: 0;
    cursor: default;

    @include mobile {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
      box-shadow: 0 0 3px 0 var(--document-box-shadow);
    }

    @include tablet-and-desktop {
      box-shadow: none;
    }

    & > div:not(:nth-last-child(2)) {
      @include mobile {
        flex-grow: 0;
      }
    }

    & > div:nth-last-child(2) {
      @include mobile {
        flex-grow: 1;
      }
    }

    & > .NoteContent:only-child {
      @include mobile {
        flex-grow: 1;
      }

      .edit-content {
        @include mobile {
          flex-grow: 0;
        }
      }
    }
  }

  .NoteHeader {
    @include mobile {
      flex-grow: 0;
    }
  }

  .NoteContent .edit-content {
    margin-top: 16px;
  }

  .quill,
  .ql-container,
  .ql-editor {
    @include mobile {
      font-size: 16px;
    }
  }

  .Button {
    margin: 0;

    &.add-attachment,
    &.reply-button {
      margin: 0;

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

    &.add-attachment {
      width: 24px;
      height: 24px;

      @include mobile {
        width: 24px;
        height: 24px;
      }
    }

    &.reply-button,
    &.note-popup-toggle-trigger {
      width: 28px;
      height: 28px;

      @include mobile {
        width: 28px;
        height: 28px;
      }
    }
  }
}

// fix for storybook
.sb-show-main {
  .InlineCommentingPopup {
    .quill.comment-textarea {
      padding: 0;
    }
  }
}
