@import compass/css3

.markers-plugin
  pointer-events: none
  .markers-plugin-markers
    overflow: hidden
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    > *
      pointer-events: auto
    .standard-marker
      position: absolute
      +translateX(-50%)
      top: 2px
      left: 0
      width: 20px
      height: 20px
      .standard-marker-inner
        position: absolute
        left: 7.5px
        top: 7.5px
        width: 5px
        height: 5px
        border-radius: 2.5px
        box-shadow: 0 0 0 3px rgba(200, 200, 200, 0.2)
        background-color: rgb(200, 200, 200)
      &:hover
        cursor: pointer
        .standard-marker-inner
          left: 6px
          top: 6px
          width: 8px
          height: 8px
          border-radius: 4px
          box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2)
          background-color: rgb(255, 255, 255)
  .markers-plugin-tooltips
    position: relative
    height: 0
    .tooltip-container
      position: absolute
      white-space: nowrap
      line-height: normal
      > *
        pointer-events: auto
      .standard-tooltip, .image-tooltip
        display: none
        background-color: rgba(2, 2, 2, 0.5)
        color: white
        font-size: 10px
        padding: 4px 7px
        line-height: normal
        &[data-show="1"]
          display: inline-block