@import './var.css';

SCircle {
  fill: var(--intergalactic-chart-palette-order-2, oklch(0.82 0.15 170));
  stroke: var(--intergalactic-chart-grid-border, #fff);
  stroke-width: 2px;
  fill-opacity: 0.5;
  transition-property: cx, cy;
  transition-duration: var(--duration);
  transition-timing-function: ease-in-out;

  &:hover {
    fill-opacity: 0.7;
  }
}

SCircle[color] {
  fill: var(--color);
}

SCircle[pattern][color] {
  fill: var(--pattern);
  fill-opacity: 0.7;
  stroke: var(--color);
  stroke-width: 1px;

  &:hover {
    fill-opacity: 0.85;
  }
}

SCircle[transparent] {
  opacity: 0.3;
}

SIntersection {
  stroke: var(--intergalactic-chart-grid-border, #fff);
  stroke-width: 2px;
  fill-opacity: 0;

  &:hover {
    fill-opacity: 0.1;
  }
}

SIntersection[transparent] {
  opacity: 0.3;
}