/*
* Global button styling
*/
/*
* MEDIA QUERIES
* Breakpoints for responsive sites
*/
/*
* Breakpoint debugging
*/
/*
* SASS Parent append
* Useful if you want to add an append to the parent without writing it out again
* Usage: @include parent-append(":hover")
* Source: https://codepen.io/imkremen/pen/RMVBvq
*/
/*
* Skew
* Useful mixing to create skewed edges
* Usage: @include angle-edge(bottomright, 3deg, topleft, 3deg, #fff);
* Source: http://www.hongkiat.com/blog/skewed-edges-css/
*/
.block-map-pins {
  position: relative;
}
.block-map-pins .pins {
  position: absolute;
  inset: 0;
}
.block-map-pins .pins .pin {
  position: absolute;
  border-radius: 50%;
  --pin-height: clamp(60px, calc(4rem + 12vw), var(--custom-pin-height, 100px));
}
.block-map-pins .pins .pin::before {
  content: "";
  position: absolute;
  width: 1px;
  height: var(--pin-height, 100px);
  background: #fff;
  bottom: 0;
}
.block-map-pins .pins .pin span {
  position: absolute;
  bottom: 100%;
  margin-bottom: var(--pin-height, 100px);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.block-map-pins .pins .pin button {
  display: block;
  padding: 0.2em 0.5em;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-family: var(--wp--preset--font-family--secondary);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: #fff;
  background-color: var(--pin-colour, var(--wp--preset--color--secondary));
  -webkit-transition: 450ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 450ms cubic-bezier(0.4, 0, 0.2, 1);
}
.block-map-pins .pins .pin button:hover {
  cursor: pointer;
  scale: 1.1;
}
.block-map-pins .pins .pin button.active {
  -webkit-animation: grow 0.5s infinite alternate;
          animation: grow 0.5s infinite alternate;
}
@media (max-width: 500px) {
  .block-map-pins .pins .pin button {
    font-size: var(--wp--preset--font-size--x-small);
  }
}
@media (max-width: 1024px) {
  .block-map-pins .pins .pin[data-marker=wcp-c] {
    --custom-pin-height: 70px !important;
  }
}

@-webkit-keyframes grow {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes grow {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}