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

.HighPlot__container {
  background-color: white;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  user-select: none;
  min-width: toRem(150px);
  min-height: toRem(150px);
  .Axes {
    .tick text {
      display: none;
    }
    .yAxisLabel {
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .xAxisLabel__container {
      display: flex;
      align-items: center;
      justify-content: center;

      &.left {
        justify-content: flex-start;
      }
      &.right {
        justify-content: flex-end;
      }

      .xAxisLabel {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: $text-sm;
      }

      &::before {
        content: '';
        display: inline-block;
        flex-shrink: 0;
        width: 6px;
        height: 6px;
        background-color: #2bc784;
        border-radius: $border-radius-circle;
        margin: 4px 5px 4px 0;
      }

      &__metric {
        &::before {
          background-color: #1473e6;
        }
      }
    }
    .axisBrush {
      .handle {
        fill: $cuddle-110;
      }
      .selection {
        fill: $pico-50;
        stroke: none;
      }
    }
  }
  &.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;
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      &.optimizeRendering {
        shape-rendering: optimizeSpeed;
      }
    }
    &.highlight > .Line:not(.active):not(.highlighted) {
      stroke-width: 1.5;
      opacity: 0.2;
    }
  }
  .Line {
    stroke-width: 1.5;
    opacity: 0.3;
    &.active {
      opacity: 1;
      stroke-width: 3;
    }
    &.highlighted {
      opacity: 1;
      stroke-width: 2;
    }
  }
}
