@import '../../../stylesheets/defaults'

+host-styles('mp-smart-hub-data-point')
  display inline-block
  height 16px
  width 16px

+prefix-classes('mp-sh-data-point-')
  .container
    align-items center
    display flex
    height 100%
    justify-content center
    // position relative is because the mp-smart-hub-tooltip is positioned absolutely
    position relative
    width 100%

    .icon
      border-radius 100px
      cursor pointer
      height 10px
      width 10px

      &:hover
        height 12px
        width 12px

      &.open
        background-color transparent
        background-repeat no-repeat
        height 16px
        transition none
        width 16px

      svg path#arrow
        fill white

      &.type-anomaly
        background-color $mp-yellow

        &:hover
          background-color $yellow-300

        svg path#disc
          fill $mp-yellow

      &.type-contour
        background-color $mp-green

        &:hover
          background-color $green-300

        svg path#disc
          fill $mp-green