$x-selection-highlight: lighten(theme-color("warning"), 15%);
$x-selection-highlight-transparent: rgba(theme-color("warning"), $opacity-light);
$x-selection-highlight-annotation-transparent: rgba(theme-color("warning"), $opacity-light);

$x-annotator-icon-color: theme-color("default");
$x-annotator-edit: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath fill='#{$x-annotator-icon-color}' d='M51.5147186,18 L45.5147186,24 L18,24 L18,51.5147186 L18,78.0294218 L44.4868476,78.0294218 L44.5162772,78 L72,78 L72,50.5235248 L78,44.5251071 L78,78 C78,81.3137085 75.3137085,84 72,84 L18,84 C14.6862915,84 12,81.3137085 12,78 L12,24 C12,20.6862915 14.6862915,18 18,18 L51.5147186,18 Z M36,60 L45.5131524,60 L66.5166087,39.00189 L57,29.4852814 L36,50.4558595 L36,60 Z M30,66 L30,47.9705782 L57,21 L75,39 L48,66 L30,66 Z M77.9982681,27.5354681 L81.5199102,24.0051915 L72,14.4852814 L68.4818182,18.0034632 L77.9982681,27.5354681 Z M60,18 L67.7573593,10.2426407 C70.1005051,7.89949494 73.8994949,7.89949494 76.2426407,10.2426407 L85.7625509,19.7625509 C88.1036682,22.1036682 88.1059915,25.8986523 85.7677424,28.2426343 L78,36.0294218 L60,18 Z'/%3E%3C/svg%3E"), "#", "%23");
$x-annotator-delete: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath fill='#{$x-annotator-icon-color}' d='M21,30 L69,30 C70.6568542,30 72,31.3431458 72,33 L72,78 C72,81.3137085 69.3137085,84 66,84 L24,84 C20.6862915,84 18,81.3137085 18,78 L18,33 C18,31.3431458 19.3431458,30 21,30 Z' opacity='.15'/%3E%3Cpath fill='%23000' d='M30,18 L30,15 C30,13.3431458 31.3431458,12 33,12 L57,12 C58.6568542,12 60,13.3431458 60,15 L60,18 L72,18 C75.3137085,18 78,20.6862915 78,24 L12,24 C12,20.6862915 14.6862915,18 18,18 L30,18 Z M72,78 C72,81.3137085 69.3137085,84 66,84 L24,84 C20.6862915,84 18,81.3137085 18,78 L18,30 L24,30 L24,78 L66,78 L66,30 L72,30 L72,78 Z M33,36 C34.6568542,36 36,37.3431458 36,39 L36,63 C36,64.6568542 34.6568542,66 33,66 C31.3431458,66 30,64.6568542 30,63 L30,39 C30,37.3431458 31.3431458,36 33,36 Z M45,36 C46.6568542,36 48,37.3431458 48,39 L48,63 C48,64.6568542 46.6568542,66 45,66 C43.3431458,66 42,64.6568542 42,63 L42,39 C42,37.3431458 43.3431458,36 45,36 Z M57,36 C58.6568542,36 60,37.3431458 60,39 L60,63 C60,64.6568542 58.6568542,66 57,66 C55.3431458,66 54,64.6568542 54,63 L54,39 C54,37.3431458 55.3431458,36 57,36 Z'/%3E%3C/svg%3E"), "#", "%23");


.textLayer {
  opacity: 1 !important;

  > * {
    @extend %p-0;
    transform: none !important;
  }

  ::selection {
    background-color: $x-selection-highlight !important;
  }
}

.annotator {
  font-size: $small-font-size;

  &-outer {
    height: 0;
    width: 0;
  }


  &-annotation {
    max-width: 23.75rem;
  }

  // Content
  &-item,
  &-item input,
  &-item textarea,
  &-wrapper {
    @extend %position-relative;
  }

  &-hide {
    @extend %d-none;
  }

  // UL List content
  &-widget {
    @extend %bg-light,
            %border,
            %card,
            %p-3;
    box-shadow: $dropdown-box-shadow;
    bottom: 1rem;
    left: -1.125rem;
    min-width: 22rem;
    position: relative;

    @include media-breakpoint-down(md) {
      position: fixed !important;
      left: 1rem;
      right: 1rem;
    }
  }

  // UL List
  &-listing {
    @extend %p-0,
            %m-0;
    list-style: none;
  }

  &-adder,
  &-outer,
  &-widget,
  &-notice {
    position: absolute;
  }

  &-adder,
  &-outer,
  &-notice {
    z-index: 1020;
  }

  &-filter {
    z-index: 1010;
  }


  // annotation text highlight
  &-hl {
    @extend %position-relative;
    @extend %cursor-pointer;
    background-color: $x-selection-highlight-annotation-transparent;
    user-select: none;

    &-active {
      background-color: $x-selection-highlight-annotation-transparent;
    }

    &-filtered {
      background-color: transparent;
    }
  }
 // start: images edit & add comments to annotation

 .annotator-adder:not(.annotator-touch-widget-inner) {
  margin-top: -3rem;
  margin-left: -1.5rem;
 }

 &-touch-widget-inner,
 &-adder {
  @extend %position-absolute;
  z-index: 1020;

  .annotator-hide & {
    display: none !important;
    @include invisible(hidden);
  }

  button {
    @extend %p-2,
            %btn,
            %x-btn-default,
            %x-btn-icon-only-md,
            %overflow-hidden,
            %cursor-pointer;
    border-radius: 50%;
    line-height: $line-height-xs;

    &:before {
      @extend %bg-white,
              %w-100,
              %h-100,
              %position-absolute;
      content: '';
      z-index: -1;
      border-radius: 50%;
    }
  }
}

  // annotation card edit & delete
  &-annotation.annotator-item {
    @extend %d-flex,
    %flex-column;

    div {
      @extend %x-text;
    }

    div:first-of-type {
      @extend .order-2,
              .x-comment-reply;
    }

    .annotator-user {
      @extend .order-1,
              %mb-1,
              .x-comment-name;
    }

    .annotator-controls {
      @extend .order-3;
    }
  }

  // controls edit & delete
  &-controls {
    @extend %d-flex,
            %justify-content-between,
            %align-items-center;

    .aannotator-hide & {
      @extend %pt-0;
    }

    // buttons
    .annotator-link,
    .annotator-delete,
    .annotator-edit {
      @extend %btn,
              %btn-sm;

      &[disabled] {
        @extend %d-none;
      }
    }

    .annotator-delete {
      @extend %btn-link,
              %px-0,
              %text-default,
              .order-1;
    }
    .annotator-edit {
      @extend %btn-primary,
              .order-2;
    }
  }


  &-notice-success {
    @extend %border-success;
  }

  &-notice-error {
    @extend %border-warning;
  }

  // annotation badge style
  &-tags {
    @extend %x-badge-container;
    .annotator-tag {
      @extend %x-badge-tag;
    }
  }

}

.annotator-hl[data-annotation-seq] {
  &:before {
    content: attr(data-annotation-seq);
    @extend %x-badge-warning,
            .rounded,
            %position-absolute;
    font-size: $font-size-xs !important;
    font-family: $font-family-sans-serif;
    top: -22px;
    left: -11px;
    box-shadow: 0.1rem 0.1rem 0 0 $white;
    height: 1.2rem;
    width:  1.2rem;
    min-width:  1.2rem;
    font-weight: $font-weight-normal;
  }
}