@import "./vars.pcss";

.yaMap {
  width: var(--yaMapWidth);
  height: var(--yaMapHeight);
  position: var(--yaMapPosition);
  cursor: var(--yaMapCursor);
  overflow: var(--yaMapOverflow);
  border-radius: var(--yaMapBorderRadius);
  @mixin mb var(--yaMapMb);

  &&--isUpdating {
    --yaMapCursor: var(--yaMapLoadingCursor);

    .yaMap__inner::after {
      @mixin show;
    }

    * {
      pointer-events: none;
    }
  }

  &&--isError {
    --yaMapCursor: var(--yaMapErrorCursor);
    --yaMapFilter: grayscale(100%);

    * {
      pointer-events: none;
    }
  }

  &&--isDisabled {
    --yaMapCursor: var(--yaMapDisabledCursor);
    --yaMapFilter: grayscale(100%);

    * {
      pointer-events: none;
    }
  }

  &&--isLoading {
    --yaMapCursor: var(--yaMapLoadingCursor);

    .yaMap__inner::after {
      @mixin show;
    }
  }

  &__map {
    width: 100%;
    height: 100%;
  }

  &__inner {
    background: var(--yaMapBg);
    width: 100%;
    height: 100%;
    filter: var(--yaMapFilter);
    position: relative;

    &::after {
      content: "";
      z-index: var(--yaMapLoadingZIndex);
      background: var(--yaMapBg);
      cursor: var(--yaMapLoadingCursor);
      @mixin transition .2s;
      @mixin hide;
      @mixin absCover;
    }
  }

  &__placemark {
    display: var(--yaMapPlacemarkDisplay);
    width: var(--yaMapPlacemarkWidth);
    height: var(--yaMapPlacemarkHeight);

    &ImageBox {
      width: 100%;
      display: inherit;
    }

    &ImageSrc {
      display: block;
      object-fit: contain;
      object-position: 50% 50%;
      border: var(--yaMapPlacemarkImgBorder);
    }
  }

  &__hint {
    opacity: var(--yaMapHintOpacity);
    visibility: var(--yaMapHintVisibility);
    transform: var(--yaMapHintTransform);
    transform-origin: var(--yaMapHintTransformOrigin);
    user-select: none;
    padding: var(--yaMapHintPadding);
    background: var(--yaMapHintBg);
    box-shadow: var(--yaMapHintBoxShadow);
    border: var(--yaMapHintBorder);
    color: var(--yaMapHintColor);
    display: flex;
    border-radius: var(--yaMapHintBorderRadius);
    max-width: var(--yaMapHintMaxWidth);
    width: var(--yaMapHintWidth);
    font-size: var(--yaMapHintFontSize);
    font-weight: var(--yaMapHintFontWeight);
    pointer-events: none;
    @mixin transition var(--yaMapHintTransition);

    &.isVisible {
      --yaMapHintOpacity: var(--yaMapHintActiveOpacity);
      --yaMapHintVisibility: var(--yaMapHintActiveVisibility);
      --yaMapHintTransform: var(--yaMapHintActiveTransform);
    }

    &Title {
      font-weight: var(--yaMapHintTitleFontWeight);
      font-size: var(--yaMapHintTitleFontSize);
      color: var(--yaMapHintTitleColor);
      @mixin mb var(--yaMapHintTitleMb);
    }
  }

  &__balloons,
  &__clusterBalloons {
    width: var(--yaMapBalloonsWidth);
    height: var(--yaMapBalloonsHeight);
    inset: var(--yaMapBalloonsTop) var(--yaMapBalloonsRight) var(--yaMapBalloonsBottom) var(--yaMapBalloonsLeft);
  }

  &__clusterBalloon {
    opacity: var(--yaMapClusterBalloonOpacity);
    visibility: var(--yaMapClusterBalloonVisibility);
    width: var(--yaMapClusterBalloonWidth);
    max-width: var(--yaMapClusterBalloonMaxWidth);
    height: var(--yaMapClusterBalloonHeight);
    max-height: var(--yaMapClusterBalloonMaxHeight);
    padding: var(--yaMapClusterBalloonPadding);
    background: var(--yaMapClusterBalloonBg);
    color: var(--yaMapClusterBalloonColor);
    box-shadow: var(--yaMapClusterBalloonBoxShadow);
    border: var(--yaMapClusterBalloonBorder);
    display: flex;
    border-radius: var(--yaMapClusterBalloonBorderRadius);
    overflow: var(--yaMapClusterBalloonOverflow);
    position: var(--yaMapClusterBalloonPosition);
    inset: var(--yaMapClusterBalloonTop) var(--yaMapClusterBalloonRight) var(--yaMapClusterBalloonBottom) var(--yaMapClusterBalloonLeft);
    transform: var(--yaMapClusterBalloonTransform);
    transform-origin: var(--yaMapClusterBalloonTransformOrigin);
    @mixin transition var(--yaMapClusterBalloonTransition);

    &Inner {
      width: 100%;
      display: flex;
      gap: 2rem;
    }

    &List {
      width: 30%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: var(--yaMapClusterBalloonListGap);
      @mixin resetList;

      &Link {
        cursor: pointer;
        color: currentColor;
        @mixin resetBtn;
        @mixin transition;
      }

      &Item {
        font-weight: var(--yaMapClusterBalloonListItemFontWeight);
        font-size: var(--yaMapClusterBalloonListItemFontSize);
        height: max-content;

        &:hover, &--isActive {
          color: var(--yaMapClusterBalloonListLinkHoverColor);
        }

        &--isActive {
          pointer-events: none;
        }
      }
    }

    &Detail {
      flex-grow: 1;

      &Header {
        margin-bottom: var(--yaMapClusterBalloonListItemHeaderMb);
      }
    }

    &Close {
      position: var(--yaMapBalloonClosePosition);
      inset: var(--yaMapBalloonCloseTop) var(--yaMapBalloonCloseRight) var(--yaMapBalloonCloseBottom) var(--yaMapBalloonCloseLeft);
      color: var(--yaMapBalloonCloseColor);
    }

    &.isVisible {
      --yaMapClusterBalloonOpacity: var(--yaMapClusterBalloonActiveOpacity);
      --yaMapClusterBalloonVisibility: var(--yaMapClusterBalloonActiveVisibility);
      --yaMapClusterBalloonTransform: var(--yaMapClusterBalloonActiveTransform);
    }
  }

  &__balloon {
    opacity: var(--yaMapBalloonOpacity);
    visibility: var(--yaMapBalloonVisibility);
    width: var(--yaMapBalloonWidth);
    max-width: var(--yaMapBalloonMaxWidth);
    height: var(--yaMapBalloonHeight);
    max-height: var(--yaMapBalloonMaxHeight);
    padding: var(--yaMapBalloonPadding);
    background: var(--yaMapBalloonBg);
    color: var(--yaMapBalloonColor);
    box-shadow: var(--yaMapBalloonBoxShadow);
    border: var(--yaMapBalloonBorder);
    display: flex;
    border-radius: var(--yaMapBalloonBorderRadius);
    overflow: var(--yaMapBalloonOverflow);
    position: var(--yaMapBalloonPosition);
    inset: var(--yaMapBalloonTop) var(--yaMapBalloonRight) var(--yaMapBalloonBottom) var(--yaMapBalloonLeft);
    transform: var(--yaMapBalloonTransform);
    transform-origin: var(--yaMapBalloonTransformOrigin);
    @mixin transition var(--yaMapBalloonTransition);

    &.isVisible {
      --yaMapBalloonOpacity: var(--yaMapBalloonActiveOpacity);
      --yaMapBalloonVisibility: var(--yaMapBalloonActiveVisibility);
      --yaMapBalloonTransform: var(--yaMapBalloonActiveTransform);
    }

    &Title {
      font-weight: var(--yaMapBalloonTitleFontWeight);
      font-size: var(--yaMapBalloonTitleFontSize);
      color: var(--yaMapBalloonTitleColor);
      max-width: var(--yaMapBalloonTitleMaxWidth);
      @mixin mb var(--yaMapBalloonTitleMb);
    }

    &Inner {
      width: 100%;
      max-height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      @mixin customScrollbar;
    }

    &Close {
      position: var(--yaMapBalloonClosePosition);
      inset: var(--yaMapBalloonCloseTop) var(--yaMapBalloonCloseRight) var(--yaMapBalloonCloseBottom) var(--yaMapBalloonCloseLeft);
      color: var(--yaMapBalloonCloseColor);

      &Btn {
        display: flex;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        color: currentColor;
        @mixin resetBtn;

        * {
          pointer-events: none;
        }
      }
    }
  }

  &__cluster {
    width: var(--yaMapClusterWidth);
    height: var(--yaMapClusterHeight);
    border-radius: var(--yaMapClusterBorderRadius);
    border: var(--yaMapClusterBorder);
    color: var(--yaMapClusterColor);
    cursor: var(--yaMapClusterCursor);
    background: var(--yaMapClusterBg);
    font-size: var(--yaMapClusterFontSize);
    font-weight: var(--yaMapClusterFontWeight);
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  &__panel {
    position: var(--yaMapPanelPosition);
    inset: var(--yaMapPanelTop) var(--yaMapPanelRight) var(--yaMapPanelBottom) var(--yaMapPanelLeft);
    z-index: var(--yaMapPanelZIndex);
    border: var(--yaMapPanelBorder);
    border-radius: var(--yaMapPanelBorderRadius);
    box-shadow: var(--yaMapPanelBoxShadow);
    background: var(--yaMapPanelBg);
    height: var(--yaMapPanelHeight);
    width: var(--yaMapPanelWidth);
    display: flex;
    @mixin hide;
    @mixin transition var(--yaMapPanelTransition);

    &.isVisible {
      @mixin show;
    }

    &Close {
      position: var(--yaMapPanelClosePosition);
      top: var(--yaMapPanelCloseTop);
      right: var(--yaMapPanelCloseRight);

      .btn {
        --btnWidth: var(--yaMapPanelCloseBtnSize);
        --btnHeight: var(--yaMapPanelCloseBtnSize);
        --btnBg: var(--yaMapPanelCloseBtnBg);
        --btnHoverBg: var(--yaMapPanelCloseBtnHoverBg);
        --btnActiveBg: var(--yaMapPanelCloseBtnActiveBg);
        --btnBorderWidth: var(--yaMapPanelCloseBtnBorderWidth);
        --btnTextColor: var(--yaMapPanelCloseBtnTextColor);
        --btnHoverTextColor: var(--yaMapPanelCloseBtnHoverTextColor);
        --btnActiveTextColor: var(--yaMapPanelCloseBtnActiveTextColor);
        --btnBorderRadius: var(--yaMapPanelCloseBtnBorderRadius);
        --btnBoxShadow: var(--yaMapPanelCloseBtnBoxShadow);
      }
    }

    &Inner {
      width: 100%;
      padding: var(--yaMapPanelPadding);
    }

    &Scroll {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      display: flex;
      @mixin customScrollbar;
    }
  }
}