@use "../../../styles/int.scss";

$white: #fff;
$off-white: int.$warmgray-10;
$black: #000;
$off-black: int.$warmgray-90;
$politico-line: int.$warmgray-20;
$politico-grey: int.$warmgray-50;
$context-geography-label: int.$warmgray-50;
$context-geography-line: int.$warmgray-30;
$context-geography-background: int.$warmgray-10;
$context-out-of-bounds-background: $white;
$context-active-shape-line: $black;

@mixin active-shape {
  opacity: 0;
  stroke: $context-active-shape-line;
  stroke-width: 1px;
  fill: none;
  pointer-events: none;
  vector-effect: non-scaling-stroke;

  &.active {
    opacity: 1;
    stroke-width: 2px;
  }
}