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

$shadow-stroke-width: 3px;
$shadow-opacity: .7;

.city {
  opacity: 1;
  transition: opacity .2s linear;

  &.hidable {
    @include int.container-at-most("xs") {
      opacity: 0;
    }

    @include int.breakpoint-at-most("xs") {
      opacity: 0;
    }
  }
}

.cityMarker {
  fill: int.$warmgray-100;
  stroke: int.$warmgray-10;
  stroke-width: 2;
  pointer-events: none;
}

.label {
  fill: int.$warmgray-10;
  stroke: int.$warmgray-10;
  paint-order: stroke;
  stroke-width: 3;
  stroke-linecap: butt;
  stroke-linejoin: miter;

  @include int.font-family($family: "sans");
}

.labelFill {
  fill: int.$warmgray-100;

  @include int.font-family($family: "sans");
}

.label,
.labelFill {
  dominant-baseline: middle;
  alignment-baseline: middle;
  pointer-events: none;

  $label-margin: 6px;

  &.right {
    transform: translateX($label-margin);
  }

  &.left {
    text-anchor: end;
    transform: translateX(-$label-margin);
  }

  &.top-right {
    transform: translate($label-margin, -$label-margin);
  }

  &.top-left {
    text-anchor: end;
    transform: translate(-$label-margin, -$label-margin);
  }

  &.bottom-right {
    transform: translate($label-margin, $label-margin);
  }

  &.bottom-left {
    text-anchor: end;
    transform: translate(-$label-margin, $label-margin);
  }
}