src/components/Note/ReplyArea/ReplyAreaMultiSelect.scss
@import '../../../constants/styles';
@import '../../../constants/note';

.multi-reply-place-holder {
  height: 100px;
}

.reply-area-multi-container {
  border-top: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  inset-block-end: 0px;
  z-index: 100;
  background: var(--panel-background);

  form {
    width: 100%;
    display: flex;
  }

  .reply-area-multi-header {
    display: flex;
    flex-direction: row;
    margin-inline-start: 16px;
    margin-top: 28px;
    position: relative;
    justify-content: space-between;

    .title {
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
    }

    .close-icon {
      display: flex;
      align-items: center;
      padding-inline-end: 12px;
      cursor: pointer;
      position: relative;
      inset-block-start: 1px;

      .close-icon {
        width: 22px;
        height: 22px;
      }
    }
  }

  .reply-button-container {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }

  .reply-button {
    width: 28px;
    height: 28px;
    @include button-reset;
    inset-inline-end: 10px;
    inset-block-end: 12px;

    // for IE only
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      width: 80px;
    }

    &:hover {
      background: var(--blue-1);
    }

    &.disabled {
      cursor: not-allowed;
    }
  }

  .reply-area {
    position: relative;
    flex: 1;
    margin: 13px 17px 12px 16px;
    border-radius: 4px;
    align-items: center;
    background: var(--component-background);

    &.unread {
      background: rgba($color: $pdftron-blue, $alpha: 0.08);
    }

    .comment-textarea .ql-container .ql-editor.ql-blank {
      padding: 4px 4px 4px 4px;

      &::before {
        inset-inline-start: 4px;
      }
    }
  }

  .add-attachment {
    display: none;
  }

  &.modular-ui {
    padding: 16px 16px 24px;

    form {
      margin-bottom: 0px;
    }

    .reply-area {
      margin: 13px 16px 24px 0px;
    }

    .reply-area-multi-header {
      margin-inline-start: 0px;
      margin-top: 0px;

      .close-icon {
        width: 28px;
        height: 28px;
      }
    }

    .close-icon {
      padding-inline-end: 0px;
      margin-inline-end: 16px;
    }

    .reply-button-container {
      margin-inline-end: 16px;
      margin-bottom: 12px;
    }

    .reply-button {
      inset-inline-start: 0px;
      inset-inline-end: 0px;
    }
  }
}
