// The city-picker wrapper
.#{$city-picker-prefix-cls} {
  &__input {
    $root: #{&};
    position: relative;
    min-height: $city-picker-input-height;
    border: 1px solid $gray-lightest;
    border-radius: $border-radius;
    padding-right: $city-picker-input-padding-right;
    cursor: pointer;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  
    &:not(&-disabled):hover {
      border-color: $brand-primary;
    }
  
    &-active {
      border-color: $brand-primary;
      box-shadow: inset 0 0 0 2px rgba($brand-primary, 0.3);
    }
  
    &-disabled {
      cursor: not-allowed;
      background-color: #f4f4f4;
      border-color: #e5e5e5;
    }

    & > i {
      position: absolute;
      font-size: 16px;
      right: 8px;
      top: 2px;
    }

    .tag {
      float: left;
      margin: 2px;
      color: #0b82ff;
      background-color: rgba(11, 130, 255, 0.1);
  
      i {
        color: inherit;
        cursor: pointer;
      }
    }
  
    &-sm {
      min-height: 24px;
  
      & > i {
        top: -1px;
      }
  
      .tag {
        line-height: 16px;
        height: 16px;
      }
    }
  }
  
  &__container {
    position: absolute;
    width: 732px;
    background: $white;
    border: 1px solid #dcdfe6;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: $border-radius;
    z-index: $zindex-fixed;
  }
  
  &__content {
    position: relative;
    background-color: $gray-lightest-10;
    border-radius: $border-radius;
  
    .city-picker__close {
      position: absolute;
      right: 8px;
      top: 4px;
      font-size: $font-size-base;
      cursor: pointer;
  
      &:hover {
        color: $gray-dark;
      }
    }
  
    .tabs-list {
      padding: 0 20px 0 12px;
      box-shadow: none;
    }
  
    .tab-content {
      background-color: $white;
      border-bottom-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  
    .nav-tabs .nav-link {
      color: $gray-dark;
    }
  
    .tab-content {
      padding: 6px 0px 4px 20px;
    }
  
    .picker-list-container > div {
      float: left;
    }
  
    .picker-title {
      width: 30px;
      color: $gray-dark;
      font-size: 14px;
      line-height: 20px;
      padding-top: 4px;
    }
  
    .picker-list-item {
      width: 132px;
      float: left;
      line-height: 20px;
      padding: 4px 0px;
  
      span {
        display: inline-block;
        border-radius: $border-radius;
        padding: 0px 5px;
        color: $gray-dark;
        cursor: pointer;
  
        &:hover {
          background-color: rgba($brand-primary, 0.1);
        }
  
        &.active {
          padding-right: 15px;
        }
      }
    }
  
    .no-picker-title {
      .picker-list-item {
        width: 20%;
      }
    }
  
    .picker-list {
      width: calc(100% - 30px);
    }
  }
}