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

@map-position-selector-prefix-cls: ~'@{sen-prefix}-position-selector';

@padding-base: 8px;
@tool-max-width: 32px;
@tool-min-width: 24px;
@box-shadow-1: 0 0 2px rgba(60, 73, 97, 0.08), 0 4px 8px rgba(109, 119, 137, 0.16);

.common {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: @box-shadow-1;
}

.@{map-position-selector-prefix-cls} {
  border-radius: 4px;

  >div>div {
    &:first-child {
      border-radius: 4px;
    }
  }

  &-search-address {
    position: absolute;
    top: 12px;
    left: 12px;
    transform: translateZ(0);
    box-shadow: @box-shadow-1;
    overflow: visible;
    z-index: 12;

    .ant-input-affix-wrapper {
      padding: 2px 8px;
      padding-right: 0;
      height: 32px;
      font-size: 12px;
      border: none;
      box-shadow: none;

      input.ant-input {
        font-size: 12px;
        line-height: 20px;
      }
    }

    .ant-input-group>.ant-input:first-child {
      line-height: 24px;
      padding: 4px 12px;
      border: none !important;

      &::-webkit-input-placeholder {
        color: rgba(10, 27, 57, 0.6);
      }
    }

    .ant-input-search>.ant-input-group>.ant-input-group-addon:last-child .ant-input-search-button {
      border: none !important;
      color: rgba(10, 27, 57, 0.35);
    }

    .ant-input:focus,
    .ant-input-focused {
      box-shadow: none !important;
    }

    .ant-input-search-icon::before {
      border-left: none;
    }

    .ant-input-search-icon {
      padding: 0;
    }

    .ant-input-affix-wrapper-disabled {
      background-color: #F5F6F7;
    }

    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus {
      box-shadow: none;
      border: none !important;
    }
    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
      box-shadow: none;
      border: none !important;
    }
  }

  &-search-address-small {
    .ant-input-affix-wrapper {
      height: 24px;
    }
  }

  &-search-address-empty {
    margin: 8px 0;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: rgba(10, 27, 57, 0.35);
  }

  &-search-address-empty-small {
    font-size: 12px;
    line-height: 20px;
  }

  &-search-address-clear-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    font-size: 8px;
    background-color: rgba(10, 27, 57, 0.08);
    color: #000;
    cursor: pointer;

    &:hover {
      background-color: rgba(10, 27, 57, 0.15);
    }
  }

  &-search-address-dropdown {
    .common();
    border-radius: 4px;
    position: absolute;
    width: 240px;
    top: 38px;
    left: 0;
    padding: 8px 0;
    max-height: 338px;
    overflow-y: overlay;
    z-index: 10;
    >p {
      margin: 0;
      color: rgba(10, 27, 57, 0.6);
      font-size: 14px;
      line-height: 22px;
    }

    &::-webkit-scrollbar-track {
      background-color: #fff;
      border-radius: 4px;
    }

    &::-webkit-scrollbar,
    &::-webkit-scrollbar-thumb {
      background-color: rgba(10, 27, 57, 0.35);
      width: 4px;
      border-radius: 4px;
      // border-color: transparent;
      // border-width: 4px;
      // box-sizing: border-box;
      cursor: pointer;

      &:hover {
        background-color: rgba(10, 27, 57, 0.6);
      }
    }
  }

  &-search-address-dropdown-no-search {
    top: 42px;
  }

  &-search-address-dropdown-small {
    max-height: 240px;
    top: 34px;

    >p {
      font-size: 12px;
      line-height: 20px;
    }
  }

  &-search-address-dropdown-tip-small {
    max-height: 240px;
    top: 34px !important;
    >p {
      font-size: 12px;
      line-height: 20px;
    }
  }

  &-search-address-dropdown-tip {
    padding: 12px;
    font-size: 12px;
    line-height: 20px;
    top: 42px;
    border-radius: 4px;
    width: 344px;

    .ant-input {
      line-height: 20px;
      padding: 2px 8px;
    }

    .input-error {
      border-color: #F72232;
    }

    p {
      margin: 0;
    }

    p.sen-error {
      margin-top: 2px;
      margin-bottom: 8px;
      color: #F72232;
    }

    p.sen-tip {
      margin-top: 2px;
      margin-bottom: 8px;
      color: rgba(10, 27, 57, 0.35);
    }

    p.sen-district {
      margin-bottom: 12px;
      color: rgba(10, 27, 57, 0.60);
      white-space: wrap;
    }

    .sen-btn {
      padding: 2px 8px;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      background-color: rgba(10, 27, 57, 0.04);
      color: rgba(10, 27, 57, 1);
      font-size: 12px;
      line-height: 20px;
      cursor: pointer;

      &:active {
        background-color: rgba(10, 27, 57, 0.15);
      }

      &:hover {
        background-color: rgba(10, 27, 57, 0.08);
      }
    }
  }

  &-search-address-dropdown-item {
    cursor: pointer;
    padding: 8px 12px;

    >p {
      margin: 0;
      max-width: 216px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    >p:first-child {
      font-size: 14px;
      line-height: 22px;
      color: rgba(10, 27, 57, 0.8);
      display: inline-block;
    }

    >p:last-child {
      font-size: 12px;
      line-height: 20px;
      color: rgba(10, 27, 57, 0.35);
    }

    &:hover {
      background-color: rgba(10, 27, 57, 0.04)
    }
  }

  &-search-address-dropdown-item-small {
    >p {
      max-width: 180px;
    }
  }

  &-city-selector {
    position: absolute;
    top: 12px;
    left: 260px;
  }

  &-city-selector-small {
    left: 220px;
  }

  &-city-selector-content {
    padding: 5px 8px;
    font-size: 14px;
    line-height: 22px;
    color: rgba(10, 27, 57, 0.8);
    cursor: pointer;
    .common();

    .sen-icon {
      margin-left: 4px;
      color: rgba(10, 27, 57, 0.8);
    }

    &:hover {
      color: #2B6DE5;

      .sen-icon {
        color: #2B6DE5;
      }
    }
  }

  &-city-selector-content-small {
    padding: 1px 8px;
    font-size: 12px;
  }

  &-city-selector-content-visible {
    .sen-icon  {
      transform: rotate(180deg);
    }
  }

  &-city-selector-content-disabled {
    cursor: not-allowed;
    background-color: #F5F6F7;

    &:hover {
      color: rgba(10, 27, 57, 0.8);

      .sen-icon {
        color: rgba(10, 27, 57, 0.8);
      }
    }
  }

  &-city-selector-dropdown {
    .common();
    position: absolute;
    top: 38px;
    width: 320px;
    z-index: 1;
    border-radius: 4px;

    .ant-input-affix-wrapper {
      padding: 2px 8px;
      height: 24px;
      font-size: 12px;
      border: none;
      box-shadow: none;

      input.ant-input {
        font-size: 12px;
        line-height: 20px;
      }
    }

    .ant-input-group>.ant-input:first-child {
      line-height: 20px;
      font-size: 12px;
      padding: 2px 8px;
      border: none !important;
      background-color: rgba(10, 27, 57, 0.04) !important;

      &::-webkit-input-placeholder {
        color: rgba(10, 27, 57, 0.6);
      }
    }

    .ant-input-group-addon {
      background-color: #fff !important;
    }

    .ant-input-group-addon button {
      background-color: rgba(10, 27, 57, 0.04) !important;
    }

    .ant-input-search>.ant-input-group>.ant-input-group-addon:last-child .ant-input-search-button {
      border: none !important;
    }

    .ant-input:focus,
    .ant-input-focused {
      box-shadow: none !important;
    }

    .ant-input-search-icon::before {
      border-left: none;
    }

    .ant-input-search-icon {
      padding: 0;
    }

    >div:first-child {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 48px;
      padding: 12px 16px;
      border-radius: 2px 2px 0 0;
      border-bottom: solid 1px rgba(10, 27, 57, 0.08);
    }

    >div:last-child {
      padding: 16px;
      padding-right: 4px;
      border-radius: 0 0 2px 2px;
      max-height: 280px;
      overflow-y: overlay;

      &::-webkit-scrollbar-track {
        background-color: #fff;
        padding:4px;
        width: 16px;
        border-radius: 4px;
      }

      &::-webkit-scrollbar,
      &::-webkit-scrollbar-thumb {
        background-color: rgba(10, 27, 57, 0.35);
        width: 4px;
        border-radius: 4px;
        cursor: pointer;
  
        &:hover {
          background-color: rgba(10, 27, 57, 0.6);
        }
      }
    }
  }

  &-city-selector-dropdown-small {
    top: 32px !important;
    >div:last-child {
      max-height: 192px;
    }
  }

  &-city-selector-dropdown-title {
    font-size: 12px;
    line-height: 20px;

    >div:first-child {
      display: flex;
      color: rgba(10, 27, 57, 0.6);

      p {
        margin: 0;
        margin-left: 8px;
        color: rgba(10, 27, 57, 1);
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  &-city-selector-dropdown-province {
    display: flex;
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 8px;

    p {
      min-width: 36px;
      margin: 0;
      margin-right: 12px;
      color: #0A1B39;
      font-weight: bold;
      white-space: nowrap;
    }

    >div {
      display: flex;
      flex-wrap: wrap;

      span {
        display: block;
        margin-bottom: 4px;
        margin-right: 12px;
        color: rgba(10, 27, 57, 0.6);
        cursor: pointer;

        &:hover {
          color: #2B6DE5;
        }
      }
    }
  }

  &-tools {
    position: absolute;
    bottom: 12px;
    right: 12px;

    .anticon {
      color: fade(#0A1B39, 60%);
    }

    /** ant 样式覆盖 */
    .ant-popover-placement-left>.ant-popover-content>.ant-popover-arrow {
      display: none;
    }

    .ant-popover-inner {
      box-shadow: none;
    }

    .ant-popover-inner-content {
      padding: 0;
    }
  }

  &-tools-theme {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    .common();

    >div {
      width: @tool-min-width;
      height: @tool-min-width;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  &-tools-theme-small {
    >div {
      width: 16px;
      height: 16px;
    }
  }

  &-tools-theme,
  &-tools-zooms {
    .common();
  }

  &-tools-item {
    width: @tool-max-width;
    height: @tool-max-width;
    cursor: pointer;
    text-align: center;
    line-height: @tool-max-width;
    color: rgba(10, 27, 57, 0.6);
    font-size: 16px;

    &:hover {
      background-color: rgba(10, 27, 57, 0.04);
    }
  }

  &-tools-item-small {
    width: @tool-min-width;
    height: @tool-min-width;
    line-height: @tool-min-width;
  }

  &-tools-theme-content {
    position: absolute;
    right: 0px;
    top: -16px;
    display: flex;
    border-radius: 2px;
    box-shadow: @box-shadow-1;

    >div {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      cursor: pointer;
      background: #fff;

      &:last-child {
        padding-left: 0;
      }

      &:first-child {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
      }

      &:last-child {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
      }

      >div {
        width: 24px;
        height: 24px;
        border: none;
        background-repeat: no-repeat;
        background-size: contain;
      }

      &:hover {
        >div {
          border: solid 1px #2B6DE5;
        }
      }
    }
  }

  &-tools-theme-content-small {
    top: -12px;

    >div {
      >div {
        width: 16px;
        height: 16px;
      }
    }
  }

  &-marker-icon.anticon {
    font-size: 32px;
  }

}

.ant-tooltip-arrow {
  width: 16px !important;
  height: 16px !important;
}

.ant-tooltip-inner {
  border-radius: 4px !important;
  box-shadow: none;
  background-color: rgba(10, 27, 57, 0.8) !important;
}

.ant-tooltip-placement-top .ant-tooltip-arrow-content {
  border: none;
  box-shadow: none;
}

.ant-tooltip-arrow-content {
  --antd-arrow-background-color: transparent;
  background-color:  rgba(10, 27, 57, 0.8);
}