/** 
 * @文件说明: 定义地图Map组件的样式
 * @创建人: pjtools@vip.qq.com 
 * @创建时间: 2020-03-11 21:25:42 
 */

@import '../../style/themes/default';

// -------- Mixins -----------
.position-direction() {
  &.position-top-left {
    top: 0;
    left: 0;
  }

  &.position-top-right {
    top: 0;
    right: 0;
  }

  &.position-bottom-left {
    bottom: 0;
    left: 0;
  }

  &.position-bottom-right {
    bottom: 0;
    right: 0;
  }
}
.position-direction(@center) when (@center) {
  .position-direction();
  &.position-top-center {
    display: flex;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
  }

  &.position-bottom-center {
    display: flex;
    justify-content: center;
    left: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
  }

  &.position-left-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    top: 0;
    height: 100%;
    pointer-events: none;
  }

  &.position-right-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    right: 0;
    top: 0;
    height: 100%;
    pointer-events: none;
  }
}

// -------- Map -----------
.@{map-prefix-cls} {
  position: relative;
  color: @text-color;
  overflow: hidden;
  transition: all 0.3s;

  &-bordered {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-container {
    position: relative;
    width: 100%;
    height: 100%;

    &-views-group {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      background-color: rgba(240, 238, 234, 1);
      outline: none;
    }

    &-view-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      outline: none;
      user-select: none;

      .mapboxgl-canvas {
        outline: none;
        user-select: none;
      }
    }
  }

  &-extended-components {
    width: 100%;
    height: 0;
  }

  // 地图控件组件
  &-controls-wrapper {
    position: absolute;
    z-index: @zindex-map-control;
    transition: all 0.5s ease;

    .position-direction();

    &.position-top-left,
    &.position-top-right,
    &.position-bottom-left,
    &.position-bottom-right {
      display: flex;

      & > * {
        transition: all 0.5s ease;
        &:not(:first-child) {
          margin-left: 6px;
        }
      }
    }
  }

  // 地图交互组件
  &-interactions-wrapper {
    position: absolute;
    z-index: @zindex-map-interactions;
    transition: all 0.5s ease;
  }

  // 扩展组件
  &-components-wrapper {
    position: absolute;
    z-index: @zindex-map-component;
    transition: all 0.5s ease;

    .position-direction(true);
  }
}
