#siteListWrapper {
  position: relative;
  padding-bottom: 0;
  flex: 1;
  min-height: 0;
}

#siteMap {
  width: 100%;
  height: 100%;

  .ol-attribution {
    left: .5em;
    right: auto;
  }

  .ol-zoom {
    left: 1.5em;
    right: auto;
    display: none;
  }
}

.site-pin {
  position: relative;
  --pin-hover-area-translate: translateX(-50%);

  /* Hover area */
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: var(--pin-hover-area-translate);
    width: 70px;
    height: 50px;
    opacity: 0;
    z-index: 0;
  }

  .pin-container {
    --triangle-offsetY: 4px;
    --triangle-upper-hover-opacity: 0;
    --triangle-lower-hover-opacity: 1;
    display: block;
    position: relative;
    background-color: var(--clr-brand-primary);
    padding: var(--space-xs);
    border-radius: var(--radius-full);
    border: 2px solid var(--clr-white);
    transition: all 0.3s ease !important;
    box-shadow: var(--shadow-pop);
    cursor: pointer;

    /* Above triangle */
    &::before {
      content: '';
      position: absolute;
      top: auto;
      left: 50%;
      bottom: calc(100% + var(--triangle-offsetY));
      transform: translateX(-50%) rotate(45deg);
      width: 16px;
      height: 16px;
      background-color: var(--clr-white);
      border-radius: 4px;
      opacity: 0;
      user-select: none;
      pointer-events: none;
      z-index: 2;
    }

    /* Lower triangle */
    &::after {
      content: '';
      position: absolute;
      top: calc(100% + var(--triangle-offsetY));
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 16px;
      height: 16px;
      background-color: var(--clr-white);
      border-radius: 4px;
      opacity: 0;
      user-select: none;
      pointer-events: none;
      z-index: 2;
    }

    .site-name {
      opacity: 0;
      position: absolute;
      left: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%);
      padding: var(--space-xxs) var(--space-xs);
      background-color: var(--clr-white);
      box-shadow: var(--shadow-pop);
      border-radius: var(--radius-xl);
      font-size: var(--font-size-sm);
      opacity: 1;
      pointer-events: none;
      user-select: none;
    }

    .pin {
      opacity: 1;
      position: absolute;
      width: 15px;
      height: 15px;
    }

    .pointer {
      opacity: 0;
      width: 15px;
      height: 15px;
    }
  }

  .site-card-tags {
    .user-tags-cell {
      max-width: min(280px, 14dvw);
      justify-content: end;

      .tag {
        padding-right: 8px;
        .tag-remove-btn {
          display: none;
        }
      }
      button.tag-add-btn {
        display: none;
      }
    }
  }

  &:hover, &.active {
    .pin-container {
      transform: scale(1.2);
      animation: pulse-animation 1s;
      background-color: var(--clr-white);
      border-color: var(--clr-brand-primary);

      &::before {
        opacity: var(--triangle-upper-hover-opacity);
        transition: opacity 0.2s;
        transition-delay: 0.2s;
      }
      &::after {
        opacity: var(--triangle-lower-hover-opacity);
        transition: opacity 0.2s;
        transition-delay: 0.2s;
      }

      .pointer {
        opacity: 1;
      }

      .pin {
        opacity: 0;
      }

      .site-name {
        opacity: 0;
      }
    }
    .site-card {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) scale(1);
    }
  }

  &.active {
    .pin-container {
      background-color: var(--clr-black);
    }
  }

  .site-card {
    position: absolute;
    display: flex;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) scale(0.94);
    transform-origin: top center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
    overflow: visible;
    box-shadow: var(--shadow-pop);

    .site-card-content {
      .site-card-header {
        * {
          transition: all 0.3s !important;
        }
        .site-card-tags {
          max-width: none;
        }
      }

      .site-admins {
        .admin-row {
          .image {
            color: var(--seat-admin-color);
             img {
              filter: brightness(0) invert(1);
             }
          }

          .name {
            padding: 0;
            padding-top: 1px;
            line-height: 1.2;
            margin: 0;
            vertical-align: middle;
          }
        }
      }
      .site-card-footer {
        display: flex;
        gap: var(--space-xs);
        padding-top: var(--space-xs);

        .settings-card-content-body {
          flex-wrap: nowrap;
          max-width: none;

          .info-field-wrapper {
            flex: 1;
            padding: var(--space-xs);
            background-color: var(--clr-blue-100);
            border-radius: var(--radius-lg);
  
            label {
              color: inherit;
              opacity: 1;
            }
          }
        }
      }
    }

    .site-card-image-container {
      display: none;
    }

    .site-card-footer {
      .icon-btn-group {
        display: none;
      }
    }
  }
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.site-list-container {
  max-width: 800px;
  position: absolute;
  top: var(--space);
  right: var(--space);
  bottom: var(--space);
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: var(--space);

  background-color: rgba(255, 255, 255, 0.87);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);

  overflow: hidden;
  width: min(35dvw, 600px);

  .site-card-image-container {
    display: none;
  }

  .header-nav {
    background-color: var(--clr-white);
    padding: var(--space-xs) var(--space);
  }

  .site-list-search-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-inline: var(--space);
  }

  .sites {
    padding: var(--space);
    gap: var(--space-sm);
    background-color: var(--clr-grey-50);
    overflow-y: auto;

    .site-card {
      .site-card-content {
        padding: var(--space-sm);

        .site-card-tags {
          .user-tags-cell {
            max-width: min(280px, 14dvw);
            justify-content: end;
          }
        }

        .tag-add-btn-text {
          display: none;
        }
  
        .site-admins {
          display: none;
        }
      }
    }
  }
}