@import '../themes/default';

@popup-prefix-cls: ~'@{map-prefix-cls}-popup';

@popup-arrow-width: 6px;
@popup-distance: @popup-arrow-width + 0px;

.mapboxgl-popup {
  .@{popup-prefix-cls} {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: auto;

    .popup-arrow {
      position: absolute;
      display: block;
      width: sqrt(@popup-arrow-width * @popup-arrow-width * 2);
      height: sqrt(@popup-arrow-width * @popup-arrow-width * 2);
      background: transparent;
      border-style: solid;
      border-width: sqrt(@popup-arrow-width * @popup-arrow-width * 2) / 2;
      transform: rotate(45deg);
    }

    .popup-inner {
      display: flex;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      background-color: @white;
      background-clip: padding-box;
      border-radius: @map-border-radius;
      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

      .popup-inner-close {
        position: absolute;
        font-size: 12px;
        right: 4px;
        top: 2px;
        color: @text-color;

        &:hover {
          color: @error-color;
          cursor: pointer;
        }
      }

      .popup-inner-content {
        width: 100%;
        height: 100%;
        padding: 0;
        user-select: text;
      }

      .popup-inner-close + .popup-inner-content {
        padding: 16px 16px 12px;
      }
    }

    &.no-skin {
      .popup-inner {
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
      }
    }
  }

  &.mapboxgl-popup-anchor-bottom .@{popup-prefix-cls} {
    padding-bottom: @popup-distance;
  }
  &.mapboxgl-popup-anchor-bottom-left .@{popup-prefix-cls} {
    padding-left: @popup-distance;
    transform: translateY(12px);
  }
  &.mapboxgl-popup-anchor-bottom-right .@{popup-prefix-cls} {
    padding-right: @popup-distance;
    transform: translateY(12px);
  }
  &.mapboxgl-popup-anchor-top .@{popup-prefix-cls} {
    padding-top: @popup-distance;
  }
  &.mapboxgl-popup-anchor-top-left .@{popup-prefix-cls} {
    padding-left: @popup-distance;
    transform: translateY(-12px);
  }
  &.mapboxgl-popup-anchor-top-right .@{popup-prefix-cls} {
    padding-right: @popup-distance;
    transform: translateY(-12px);
  }
  &.mapboxgl-popup-anchor-left .@{popup-prefix-cls} {
    padding-left: @popup-distance;
  }
  &.mapboxgl-popup-anchor-right .@{popup-prefix-cls} {
    padding-right: @popup-distance;
  }

  &.mapboxgl-popup-anchor-bottom .popup-arrow {
    bottom: @popup-distance - @popup-arrow-width + 2.2px;
    border-top-color: transparent;
    border-right-color: @popover-bg;
    border-bottom-color: @popover-bg;
    border-left-color: transparent;
    box-shadow: 3px 3px 7px fade(@black, 7%);
  }
  &.mapboxgl-popup-anchor-bottom-left .popup-arrow,
  &.mapboxgl-popup-anchor-top-left .popup-arrow,
  &.mapboxgl-popup-anchor-left .popup-arrow {
    left: @popup-distance - @popup-arrow-width + 2px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: @popover-bg;
    border-left-color: @popover-bg;
    box-shadow: -3px 3px 7px fade(@black, 7%);
  }
  &.mapboxgl-popup-anchor-bottom-right .popup-arrow,
  &.mapboxgl-popup-anchor-top-right .popup-arrow,
  &.mapboxgl-popup-anchor-right .popup-arrow {
    right: @popup-distance - @popup-arrow-width + 2px;
    border-top-color: @popover-bg;
    border-right-color: @popover-bg;
    border-bottom-color: transparent;
    border-left-color: transparent;
    box-shadow: 3px -3px 7px fade(@black, 7%);
  }
  &.mapboxgl-popup-anchor-top .popup-arrow {
    top: @popup-distance - @popup-arrow-width + 2px;
    border-top-color: @popover-bg;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: @popover-bg;
    box-shadow: -2px -2px 5px fade(@black, 6%);
  }

  &.mapboxgl-popup-anchor-bottom .popup-arrow,
  &.mapboxgl-popup-anchor-top .popup-arrow {
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  &.mapboxgl-popup-anchor-bottom-left .popup-arrow,
  &.mapboxgl-popup-anchor-bottom-right .popup-arrow {
    bottom: 8px;
  }
  &.mapboxgl-popup-anchor-top-left .popup-arrow,
  &.mapboxgl-popup-anchor-top-right .popup-arrow {
    top: 8px;
  }
  &.mapboxgl-popup-anchor-left .popup-arrow,
  &.mapboxgl-popup-anchor-right .popup-arrow {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  &.mapboxgl-popup-anchor-bottom-left .@{popup-prefix-cls}.no-skin,
  &.mapboxgl-popup-anchor-top-left .@{popup-prefix-cls}.no-skin {
    padding-left: 0;
    transform: translateY(0px);
  }
  &.mapboxgl-popup-anchor-bottom-right .@{popup-prefix-cls}.no-skin,
  &.mapboxgl-popup-anchor-top-right .@{popup-prefix-cls}.no-skin {
    padding-right: 0;
    transform: translateY(0px);
  }
  &.mapboxgl-popup-anchor-top .@{popup-prefix-cls}.no-skin {
    padding-top: 0;
  }
  &.mapboxgl-popup-anchor-bottom .@{popup-prefix-cls}.no-skin {
    padding-bottom: 0;
  }
  &.mapboxgl-popup-anchor-left .@{popup-prefix-cls}.no-skin {
    padding-left: 0;
  }
  &.mapboxgl-popup-anchor-right .@{popup-prefix-cls}.no-skin {
    padding-right: 0;
  }
}
