@import "widgets/autocomplete";
@import "widgets/textentry";
@import "widgets/comment/comment";
@import "widgets/tag/tag";

.r6o-editor {
  position:absolute;
  z-index:99999;
  width:400px;
  color:$standard-type;
  opacity:0;
  font-family:'Lato', sans-serif;
  font-size:17px;
  line-height:27px;

  -webkit-transition:opacity 0.2s ease-in;
     -moz-transition:opacity 0.2s ease-in;
          transition:opacity 0.2s ease-in;

  .r6o-arrow {
    position:absolute;
    overflow:hidden;
    top:-12px;
    left:12px;
    width:28px;
    height:12px;
    display:none;
  }

  .r6o-arrow:after {
    content:'';
    position:absolute;
    top:5px;
    left:5px;
    width:18px;
    height:18px;
    background-color:#fff;
    @include rotate(45deg);
  }

  .r6o-editor-inner {
    background-color:#fff;
    @include rounded-corners(2px);
    @include box-shadow(2px, 2px, 42px, 0.4);

    .r6o-widget:first-child {
      @include rounded-corners-top(2px);
    }

    .r6o-widget {
      border-bottom:1px solid $lightgrey-border;
    }
  }

  .r6o-footer {
    position:relative;
    text-align:right;
    padding:8px 0;

    .r6o-btn {
      margin-right:8px;
    }

    .r6o-btn.delete-annotation {
      position:absolute;
      top:7px;
      left:7px;
      background-color:transparent;
      border:none;
      color:$ocean;
      width:32px;
      height:32px;
      min-width:0;
      border-radius: 100%;
      padding:0;
      display: flex;
      justify-content:center;
      align-items:center;
      -webkit-transition:all .1s ease-in;
         -moz-transition:all .1s ease-in;
           -o-transition:all .1s ease-in;
              transition:all .1s ease-in;
    }

    .r6o-btn.delete-annotation:hover {
      color:#fff;
      background-color:#ef352c;
    }
  }

}

@media (max-width: 640px) {

  .r6o-editor {
    width:260px;
  }

}

.r6o-editor.r6o-arrow-top .r6o-arrow {
  display:block;
}

.r6o-editor.r6o-arrow-right {
  margin-left:8px;

  .r6o-arrow {
    left:auto;
    right:12px;
  }

}

.r6o-editor.r6o-arrow-bottom {

  .r6o-arrow {
    display:block;
    top:auto;
    bottom:-12px;
  }

  .r6o-arrow::after {
    top:-11px;
    box-shadow:none;
  }

}

.r6o-editor.pushed .r6o-arrow,
.r6o-editor.dragged .r6o-arrow {
  display:none;
}

.r6o-editor .r6o-draggable {
  cursor:move;
}

.r6o-purposedropdown {
  width: 150px;
  display: inline-block;
}