@import '~scss/variables';

.graph {
  position: relative;
  height: 60px;

  & > canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
  }
}

.cursorGuide {
  cursor: vertical-text;
}

.scrubber {
  .scrubberLine {
    cursor: col-resize;
    pointer-events: none;
    stroke: #242e42;
    stroke-width: 1px;
  }
}

.coord {
  .coordLine {
    line {
      pointer-events: none;
      stroke: $light-color03;
      stroke-width: 1px;
    }

    text {
      fill: #79879c;
      user-select: none;
    }

    &:first-child,
    &:last-child {
      line {
        display: none;
      }
    }
  }
}

.range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: transparent;
  border-bottom: 1px solid $light-color03;
  z-index: 1;

  & > svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .hoverBlock {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
  }

  .clearBlock {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 0 5px;
    border-radius: 1px;
    background-color: #36435c;
    text-shadow: 0 2px 4px rgba 36 46 66, 0.1;
    font-weight: 500;
    line-height: 20px;
    color: #ffffff;
    cursor: pointer;
    z-index: 3;
  }
}
