@use 'src/styles/abstracts' as *;

.ScatterPlot {
  background-color: white;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  user-select: none;
  min-width: toRem(150px);
  min-height: toRem(150px);
  .unableToDrawText {
    font-size: $text-md;
    text-align: center;
    fill: $grey;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
  }
  &.backgroundRect {
    cursor: crosshair;
  }
  &.zoomMode rect {
    cursor: zoom-in;
  }
  .HoverCircle {
    cursor: pointer;
    opacity: 1;
    stroke-width: 3;
    fill: white;
    border-radius: 50%;
    paint-order: stroke;
    /* on click */
    &.focus {
      stroke-width: 4;
      clip-path: unset;
      &__shadow {
        stroke-width: 12;
      }
    }
    /* on hover */
    &.active {
      stroke-width: 5;
    }
  }
  .Attributes {
    &.highlight > .HoverCircle:not(.active):not(.focus) {
      opacity: 0.5;
    }
  }
  .ChartMouseValue {
    position: absolute;
    box-sizing: border-box;
    padding: $space-xxs $space-xs;
    background-color: $primary-bg;
    border: 1px solid $primary-light;
    color: $primary-dark;
    font-size: 10px;
    font-weight: $font-400;
    white-space: nowrap;
  }
  .ChartMouseValueXAxis {
    transform: translateX(-50%);
    border-radius: 0 0 6px 6px;
    border-top: none;
    overflow: hidden;
  }
  .ChartMouseValueYAxis {
    transform: translateY(-50%);
    border-radius: 6px 0 0 6px;
    border-right: none;
    overflow: hidden;
    box-shadow: inset -8px 0 5px -6px #3b5896; /* var(--primary);*/
  }
  .Lines {
    overflow: hidden;
    &.highlight > .Circle:not(.active):not(.highlighted) {
      opacity: 0.2;
    }
  }
  .Circle {
    cursor: pointer;
    opacity: 1;
    stroke-width: 2.4;
    fill: white;
    outline: 0 solid;
    border-radius: 50%;
    paint-order: stroke;
    &.active {
      stroke-width: 5;
    }
    &.highlighted {
      opacity: 1;
    }
  }
}
