/* TODO: use tailwind or wordpress variables instead of setting colors directly. */
/* MAP STYLES */
#us-map {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.map-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 62%;
  vertical-align: middle;
  overflow: hidden;
}

#us-map path {
  transition: all 200ms;
}

#us-map path:focus {
  outline: none !important;
}

.state-map-block #us-map path.policy-state {
  fill: #0E6D5F;
}

.state-map-block #us-map path.policy-state.has-state-policy {
  fill: #c68b33;
}

.state-map-block #us-map path.non-policy-state {
  fill: #2c2f38;
}

.state-map-block .legend--policy-state {
  background-color: #0E6D5F;
}

.state-map-block .legend--policy-state.legend--has-state-policy {
  background-color: #c68b33;
}

.state-map-block #us-map path.active,
.state-map-block #us-map path.has-state-policy.active {
  fill: #ffffff;
}

.state-map-block #us-map path.inactive,
.state-map-block #us-map path.has-state-policy.inactive {
  fill: #13161e;
}

.state-map-block.theme-light #us-map path.active {
  fill: #aaaaaa;
}