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

/* 工具栏 */
.ele-map-picker-header {
  display: flex;
  align-items: center;
  padding: 8px 14px;

  .ele-map-picker-header-search {
    flex: 1;
    padding-right: 16px;
  }

  .ant-select-auto-complete {
    width: 100%;
    max-width: 220px;
  }

  .ele-map-picker-search-icon {
    color: @text-color-secondary;
  }
}

/* 地图 */
.ele-map-picker-body {
  display: flex;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  overflow: hidden;

  .ele-map-picker-main {
    flex: 1;
    position: relative;
  }

  .ele-map-picker-main-plus {
    color: #1890ff;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .ele-map-picker-main-icon {
    width: 26px;
    position: absolute;
    left: 50%;
    bottom: 50%;
    margin-left: -13px;
  }

  // poi 列表
  .ele-map-picker-poi-list {
    width: 300px;
    overflow: auto;
    border-top: 1px solid hsla(0, 0%, 60%, 0.15);
  }

  .ele-map-picker-poi-item {
    padding: 8px 30px 8px 44px;
    border-bottom: 1px solid hsla(0, 0%, 60%, 0.15);
    position: relative;
    cursor: pointer;

    &:hover {
      background: hsla(0, 0%, 60%, 0.05);
    }
  }

  .ele-map-picker-poi-item-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.4;
  }

  .ele-map-picker-poi-item-title {
    font-size: 14px;
  }

  .ele-map-picker-poi-item-address {
    font-size: 12px;
    margin-top: 2px;
    opacity: 0.6;
  }

  .ele-map-picker-poi-item-check {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    color: #1890ff;
    font-size: 14px;
    display: none;
  }

  .ele-map-picker-poi-item.active .ele-map-picker-poi-item-check {
    display: block;
  }

  // 地图图标跳动动画
  .ele-map-picker-anim-bounce {
    animation: eleMapPickerAnimBounce 500ms;
    animation-direction: alternate;
  }
}

@keyframes eleMapPickerAnimBounce {
  0%,
  60%,
  75%,
  90%,
  to {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0%,
  to {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, -10px, 0);
  }
  50% {
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
}

/* 小屏幕适应 */
@media screen and (max-width: 768px) {
  .ele-map-picker-responsive {
    &.ele-map-picker-dialog {
      top: 0;
      padding: 0;
    }

    .ele-map-picker-body {
      display: block;

      .ele-map-picker-main > div {
        height: 250px !important;
      }

      .ele-map-picker-poi-list {
        width: auto;
        height: calc(100vh - 370px) !important;
      }
    }
  }
}