@import './base.css';

* {
  transition: background-color .25s ease;
}

* {
  &::-webkit-scrollbar {
    width: 7px;
    &:horizontal {
      height: 7px;
    }
  }

  &::-webkit-scrollbar-track {
    width: 4px;
    border-radius: 4px;
    background: none;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--c-scrollbar-bg);
    border-top: 2px solid transparent;
  }
}

.DocumentContainer {
  border-right: 3px solid transparent;
}

p {
  margin: 0;
}

html, body , #app {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  margin: 0;
  padding: 0;
}

button, label, form, select, #app {
  font-size: 13px;
}

input, textarea {
  font-size: 16px;
}

button {
  outline: none;
}

input, textarea, select {
  border-radius: 2px;

  &:focus {
    outline: none;
  }
}

#app {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;

  >.content {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: auto;
  }

  *, *:before, *:after {
    box-sizing: border-box;
  }

  div {
    -webkit-tap-highlight-color: transparent;
  }

  canvas {
    user-select: none;

    &.ql-clipboard {
      user-select: text;
    }
  }

  textarea {
    appearance: none;
    user-select: text !important;
  }

  input[type=text] {
    appearance: none;
    user-select: text !important;
  }
  input[type=password]::-ms-reveal {
    display: none;
  }
}

.freetext-editor .ql-editor {
  padding: 0px;
}

.drop-down {
  padding: 8px;
  text-align: left;
  cursor: default;
  color: var(--c-text);
  background: #FFFFFF;
  box-shadow: 2px 6px 18px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.drop-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 12px 8px;
  border-radius: 2px;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
  &:hover {
    color: var(--c-popup-text-hover);
    background-color: var(--c-popup-bg-hover);
    .button {
      color: var(--c-popup-text-hover);
    }
  }
  &.active {
    color: var(--c-popup-text-active);
    background-color: var(--c-popup-bg-active);
    .button {
      color: var(--c-popup-text-active);
    }
  }
  .button {
    margin-right: 8px;
    padding: 0;
    &:not(.disabled):hover {
      background-color: transparent;
    }
  }
}
.drop-down-divider {
  width: 100%;
  height: 1px;
  margin: 4px 0;
  background-color: var(--c-divider);
}

.n-base-select-menu {
  margin-top: 2px;
  max-height: 300px;
  overflow: auto;
  background-color: var(--c-findbar-bg);
  .n-base-select-menu-option-wrapper {
    padding: 8px 0;
    .n-base-select-option {
      padding: 0 16px;
      min-height: 30px;
      color: var(--c-text);
      .n-base-icon {
        display: none;
      }
      &::before {
        left: 8px;
        right: 8px;
      }
      &.n-base-select-option--selected {
        color: #fff;
        &::before {
          background-color: var(--c-popup-bg-active);
        }
      }
    }
  }
}

.annotationContainer {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationContainer > div {
  position: absolute;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  &.annotation {
    > div {
      pointer-events: auto;
    }
    > img {
      pointer-events: auto;
    }
  }
  .freetext {
    padding: 2px 4px;
    pointer-events: auto;
    color: #000;
    font-size: 16px;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    &:focus {
      border: 1px solid #1460F3;
    }
  }
  > svg,
  >.reply-button {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
  }
  line, rect, ellipse, path ,circle {
    pointer-events: painted;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
    stroke-linecap: round;
    stroke-linejoin: miter;
  }
  &.markup .strikeout {
    top: calc(50% + 1px);
  }
  &.markup {
    mix-blend-mode: multiply;
    cursor: pointer;
    pointer-events: auto;
  }
}
.document.selection .annotationContainer * {
  pointer-events: none !important;
}
.no-select .annotationContainer > div {
  line, rect, ellipse, path ,circle {
    pointer-events: none;
  }
}

.annotationContainer > .outline-container svg {
  pointer-events: none;
  &.delete-button {
    cursor: pointer;
    pointer-events: auto;
  }
  line {
    pointer-events: painted;
    cursor: all-scroll;
  }
  circle {
    pointer-events: auto;
    cursor: all-scroll;
  }
  .move {
    cursor: all-scroll;
  }
  .nw-resize {
    cursor: nw-resize;
  }
  .w-resize {
    cursor: w-resize;
  }
  .sw-resize {
    cursor: sw-resize;
  }
  .s-resize {
    cursor: s-resize;
  }
  .se-resize {
    cursor: se-resize;
  }
  .e-resize {
    cursor: e-resize;
  }
  .ne-resize {
    cursor: ne-resize;
  }
  .n-resize {
    cursor: n-resize;
  }
}
.annotationContainer > .outline-container .reply-button {
  pointer-events: auto;
}
.point-none {
  pointer-events: auto;
}

.n-message-container.n-message-container--top {
  top: 100px;
  margin: 0 16px;
  .n-message {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    .n-message__icon {
      margin-right: 8px;
      width: unset;
      height: unset;
      font-size: 0;
      line-height: 0;
      > * {
        position: unset;
      }
    }
    .n-message__content {
      color: #000;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
    }
    &.n-message--error-type {
      background-color: #FBEDED;
      border-color: rgba(248, 113, 113, 0.30);
    }
    &.n-message--success-type {
      background-color: #E2F7EF;
      border-color: rgba(0, 207, 133, 0.30);
    }
  }
}

.contentContainer .outerline {
  .move {
    cursor: all-scroll;
  }
  .nw-resize {
    cursor: nw-resize;
  }
  .w-resize {
    cursor: w-resize;
  }
  .sw-resize {
    cursor: sw-resize;
  }
  .s-resize {
    cursor: s-resize;
  }
  .se-resize {
    cursor: se-resize;
  }
  .e-resize {
    cursor: e-resize;
  }
  .ne-resize {
    cursor: ne-resize;
  }
  .n-resize {
    cursor: n-resize;
  }
}
