/*--------------------------------------------------------------
  33. Maps Hotspot
----------------------------------------------------------------*/
.cs-map-hotspot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  .cs-hotspot-map-img {
    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: scale-down;
    }
  }
}

.hotspot-image-container {
  position: relative;
  margin: 1rem;
}

.hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  z-index: 0;

  &-button {
    height: 40px;
    width: 40px;
    animation: button-pulse 7s ease-in-out infinite;
    cursor: pointer;
    border: 1px solid $accent;
    border-radius: 100%;

    &:after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: $accent;
      border: 5px solid $accent;
      opacity: 0.7;
      border-radius: 100%;
      content: "";
      display: block;
      background-color: $accent;
      transition: border-color 1s linear;
    }
  }

  &-label {
    display: flex;
    align-items: center;
    position: absolute;
    width: 350px;
    height: 130px;
    background: $dark-bg;
    clip-path: polygon(11% 0, 100% 0, 100% 80%, 89% 100%, 0 100%, 0% 20%);
    user-select: none;
    border-radius: 25px;
    opacity: 0;
    transition: opacity 0.3s linear;

    .cs-map-card {
      display: flex;
      align-items: center;
      gap: 10px;
      img{
        clip-path: polygon(20% 0%, 100% 0, 100% 80%, 80% 100%, 0 100%, 0% 20%);
      }
    }

    p {
      padding: 15px;
      font-family: "Hedvig Letters Sans";
      line-height: 165%;
    }
  }

  // Positioning classes
  &.hotspot-top-left {
    top: 20%;
    left: 20%;
  }

  &.hotspot-top-right {
    top: 20%;
    right: 30%;
  }

  &.hotspot-bottom-left {
    bottom: 25%;
    left: 25%;
  }

  &.hotspot-bottom-right {
    bottom: 35%;
    right: 40%;
  }

  &:hover .hotspot-label,
  &--selected .hotspot-label {
    opacity: 1;
    z-index: 999;
  }
}

@keyframes button-pulse {
  0% {
    transform: scale(1, 1);
    opacity: 1;
  }
  40% {
    transform: scale(1.15, 1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}
