:root {
  // --region-bg: #f2f2f2;
  // --region-bg--hover: #fff;
  // --region-border: #d0d0d0;
  // --region-border--large: #999;

  --region-bg: #f4ebeb;
  --region-bg--hover: #fff7f7;
  --region-border: #d7d2d2;
  --region-border--large: #bba6a6;
  --map-shadow: #e8c4c42b;
}

.heraldry-map-canvas {
  width: auto;

  > svg {
    @apply mx-auto;

    // filter:
    //   drop-shadow(0 3px 3px #0f0c0c1f)
    //   drop-shadow(0 3px 0 #a6a6a6)
    //   drop-shadow(0 2px 0 #7f7f7f)
    //   drop-shadow(0 1px 0 #7f7f7f);

    filter: drop-shadow(0 3px 2px var(--map-shadow));

    path {
      fill: var(--region-bg);
      stroke: var(--region-border);
      stroke-width: 1px;
      transition: 0.3s ease-in-out;
      vector-effect: non-scaling-stroke !important;

      &:hover {
        fill: var(--region-bg--hover) !important;
      }
    }
  }

  #layerPL path {
    fill: transparent;
    pointer-events: none;
    stroke: var(--region-border--large);
    stroke-width: 1px;

    &:hover {
      fill: transparent !important;
    }
  }
}

.map-section {
  padding-left: 1vw;
  padding-right: 1vw;
  padding-bottom: 1vw;

  &.map-section--large {
    padding-bottom: 100px;
  }
}

.map-wrapper {
  container-type: inline-size;
}

.popup-with-question {
  @apply bg-black text-white mx-auto gap-10 p-4 flex-col items-center lg:flex-row rounded-[12px];

  letter-spacing: 0.02em;
  transform: scale(0.9) translateY(420px);
  animation: slideInPopupWithQuestion 0.2s ease-out forwards;
  animation: slideInPopupWithQuestion 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.2) forwards;
  animation-delay: 0.7s;
  margin-bottom: 50px;

  @media (min-width: 640px) {
    margin-bottom: 0;
  }
}

@keyframes slideInPopupWithQuestion {
  0% { transform: scale(0.9) translateY(420px); }
  100% { transform: scale(1) translateY(0); }
}

.map-wrapper {
  container-name: sidebar;
  container-type: inline-size;
}

.map-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 1;

  /* https://stackoverflow.com/a/71212660/6743808 */
  --s: 16cqw;
  --g: #ffffff00 90deg, rgb(123 75 75 / 5%) 0;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--g))
     0 0/var(--s) var(--s),
    conic-gradient(from 90deg at 1px 1px,var(--g))
     0 0/calc(var(--s)/5) calc(var(--s)/5);
  background-position: -6cqw;
  animation: mapGrid 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.2) forwards;
}

@keyframes mapGrid {
  0% { opacity: 1; }
  100% { opacity: 0; }
}