@use "../../ui/vars" as *;

.observatory {
  svg.chart {
    background-color: var(--background-primary);
    border-radius: var(--border-radius);

    .tick text {
      fill: var(--observatory-color-secondary);
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 300;
      transform: scale(1);

      &.x-labels {
        text-anchor: middle;

        &.current {
          fill: var(--grade-border);
        }
      }

      &.y-labels {
        text-anchor: end;
      }
    }

    .tick line {
      color: var(--observatory-color-secondary);
      opacity: 0.9;
      stroke: var(--observatory-border);
      stroke-dasharray: 5, 5;
      stroke-width: 1px;
    }

    .bar {
      fill: var(--grade-bg);
      stroke: var(--grade-bg);
      stroke-width: 1;

      &.current-grade {
        stroke: var(--grade-border);
      }
    }

    .you-are-here {
      polyline {
        fill: var(--background-primary);
        filter: drop-shadow(0 0 3px rgb(170 170 170));
        z-index: 9;
      }

      text {
        fill: var(--text-primary);
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-weight: 300;
      }
    }
  }
}