@use "../../vars";

.codap-component.codap-graph.minimized {
  .graph-plot {
    visibility: hidden;
  }
}

.graph-plot {
  position: relative;
  width: 100%;
  height: calc(100% - vars.$title-bar-height);

  .empty-label {
    fill: #999;
    font: vars.$empty-label-font;
  }

  .category-label {
    cursor: grab;
  }

  rect.category-label {
    opacity: 0.85;
    stroke: #315b7d;
  }

  svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  text {
    fill: black;
    font: 12px sans-serif;
  }

  .axis-wrapper {

    .axis-background {
      fill: vars.$background-fill;
    }

    .axis {
      line {
        stroke: #DDDDDD;
      }
    }

  }

  .axis-click-cue {
    fill: #999999 !important;
    font-size: 12px !important;
    font-family: Montserrat, sans-serif !important;
  }

  .grid .tick line {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
    pointer-events: none;
  }

  .zero .tick line {
    stroke: #444444;
    stroke-opacity: 0.8;
    shape-rendering: crispEdges;
    pointer-events: none;
  }
}

.graph-dot-area {
  background: white;
}

.graph-background {
  fill: white;
}

.plot-cell-background {
  fill: white;
}


.graph-d3-tip {
  font-size: small;
  line-height: 1.2;
  padding: 5px;
  pointer-events: none !important;
  color: #203d5d;
  box-shadow: 0 4px 20px 4px rgba(0, 20, 60, .1), 0 4px 80px -8px rgba(0, 20, 60, .2);
  background-color: rgba(251, 251, 176, 0.7);
  border-radius: 4px;
}

.add-attribute-drop-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;

  &.active {
    border: 5px solid rgb(255, 216, 102);
    z-index: 10;
  }

  &.over {
    background: yellow;
    opacity: 0.5;
  }
}

.add-attribute-drop-yPlus {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;

  &.active {
    border: 5px solid rgb(255, 216, 102);
  }

  &.over {
    background: yellow;
    opacity: 0.5;
  }
}

.add-attribute-drop-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 100%;

  &.active {
    border: 5px solid rgb(255, 216, 102);
  }

  &.over {
    background: yellow;
    opacity: 0.5;
  }
}

.above-points-group {
  outline: none;
}
.draggable-bin-boundary {
  stroke: #73bfca;
  stroke-width: 1px;

  &.dragging {
    stroke: steelblue;
    stroke-width: 2px;
  }
  &.lower {
    stroke-width: 2px;
  }
}
.draggable-bin-boundary-cover {
  cursor: grab;
  cursor: url("../adornments/assets/left-right-cursor.png") 8 8, grab;
  pointer-events: all;
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 8px;

  &.horizontal {
    cursor: url("../adornments/assets/up-down-cursor.png") 8 8, grab;
  }
}

.bar-cover {
  cursor: pointer;
  fill: rgba(255, 255, 255, 0);
  transition: 1s;

  &.active {
    fill: rgba(255, 255, 255, 0.3);
  }
}

.clickable-axis-label {
  cursor: pointer;
}
