@import "./var";
.#{$prefix}region {
  display: inline-block;
  vertical-align: middle;
  // cursor: pointer;
  padding: 20px;
  width: 100%;
  min-width: 100px;
  box-sizing: border-box;

  &__title {
    font-size: 0;
    color: $region-color-text;
    margin-bottom: 16px;
    padding: 0;
    min-width: 140px;
    display: inline-block;
    line-height: 30px;
    // cursor: pointer;

    &-name,
    .#{$prefix}region__name{
      font-size: $font-size-l;
    }
    &-name{
      display: inline-block;
      line-height: 30px;
      padding:0 5px 0 12px;
    }

  }
  // &__globe {
  //   width: 20px;
  //   height: 20px;
  //   display: inline-block;
  //   vertical-align: middle;
  //   border-radius: 20px;
  //   background-image: url("../../assets/image/slice/svg/globe-icon.svg");
  // }
  &__all {
    vertical-align: middle;
    padding-left: 5px;
    font-size: $region-font-size;
  }

  &__list {
    display: table;
  }
  &__col {
    display: table-cell;
    min-width: 140px;
    padding-right: 2px;
  }
  &__unit {
    margin-bottom: 38px;
  }
  &__type {
    font-size: $region-font-size;
    color: $region-color-text-label;
    line-height: 18px;
    padding: 0 6px 0 12px;
    margin-bottom: 10px;
  }
  &__item {
    font-size: 0;
    color: $region-color-text-weight;
    line-height: 30px;
    padding: 0 5px 0 12px;
    cursor: pointer;
    margin-bottom: 2px;
    .#{$prefix}flag{
      display: none;
    }
    &:hover{
      background-color: $region-item-color-bg-hover;
    }
    // .#{$prefix}flag-Globe--gray {
    //   display: inline-block;
    //   margin-bottom: 0;
    //   margin-right: 4px;
    // }

    // &--gray{
    //   background-color: $region-item-color-bg-gray;
    // }
    // &--ghost{
    //   display: inline-block;
    //   &:hover{
    //     cursor: default;
    //     background-color: transparent;
    //   }
    // }
  }
  &__flag {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 20px;
  }
  &__name {
    vertical-align: middle;
    font-size: $region-font-size;
    // margin-left: 5px;
  }
  &__num{
    margin-left: $space-base;
  }
  &__new{
    width: 6px;
    height: 6px;
    display: inline-block;
    background-color: $color-error;
    border-radius: 12px;
    margin-left: 5px;
    vertical-align: text-top;
  }

  &__history{
    margin-bottom: $space-base*5 - 2px;
    .#{$prefix}region__title{
      margin-bottom: $space-base*2 - 2px;

      .#{$prefix}region__item{
        display: inline-block;
        &:hover{
          cursor: default;
          background-color: transparent;
        }
      }
    }
    .#{$prefix}region__list{
      font-size: 0;
      display: flex;
      .#{$prefix}region__item{
        margin:0 2px 2px 0;
        min-width: 138px;
        background-color: $region-item-color-bg-gray;
        &:hover{
          background-color: $region-item-color-bg-hover;
        }
        &.is-disabled {
         
            background-color: transparent;
          
          .#{$prefix}region__num,
          .#{$prefix}region__name{
            color: $region-color-text-disabled;
          }
          &:hover{
            cursor: not-allowed;
            background-color: transparent;
          }
        }
      }
    }
  }
}

.#{$prefix}region__item.is-selected {
  background-color: $region-item-color-bg-hover;
}
.#{$prefix}region__item.is-disabled {
  &.#{$prefix}region__item--gray{
    background-color: transparent;
  }
  .#{$prefix}region__num,
  .#{$prefix}region__name{
    color: $region-color-text-disabled;
  }
  &:hover{
    cursor: not-allowed;
    background-color: transparent;
  }
}
.#{$prefix}region__col .#{$prefix}region__unit:last-child, .#{$prefix}region__unit .#{$prefix}region__item:last-child {
    margin-bottom: 0;
}

// 地域选择
.#{$prefix}dropdown.#{$prefix}dropdown--region-select {
  .#{$prefix}dropdown__header {
    background-color: $region-dropdown-color-bg;
  }
  .#{$prefix}dropdown__header.#{$prefix}dropdown-btn {
    min-width: 100px;
    border: 1px solid $region-color-border;
    height: $form-height;
    line-height: $form-height - 2;
    padding: 0 22px 0 10px;
    position: relative;
    box-sizing: border-box;
    font-size: 0;
  }
  .#{$prefix}region {
    &__item {
      display: inline-block;
      line-height: $form-height - 2;
      margin-bottom: 0;
      vertical-align: top;
      padding: 0;
    }
    &__more {
      font-size: $region-font-size;
      color: $region-color-text-label;
      line-height: $form-height - 2;
      padding-left: 20px;
      display: table-cell;
      vertical-align: top;
      display: inline-block;
    }
  }
  .#{$prefix}dropdown-btn .#{$prefix}dropdown__value {
    line-height: 28px;
    display: inline-block;
    .#{$prefix}region__item {
      .#{$prefix}flag{
        margin-right: 5px;
        display: inline-block;
      }
      // .#{$prefix}flag-Globe--gray {
      //   display: inline-block;
      //   margin-right: 4px;
      // }
    }
  }
}

.#{$prefix}dropdown.#{$prefix}dropdown--region-select.is-active .#{$prefix}dropdown__header {
  background-color: $region-item-color-bg-hover;
}
.#{$prefix}dropdown.#{$prefix}dropdown--region-select.is-disabled{
  .#{$prefix}region__item{
    cursor: inherit;
    color: $color-text-disabled;
  }
}

.#{$prefix}regionempty {
  display: table;
  margin: 50px auto;
  &__icon {
    display: table-cell;
  }
  &__content {
    display: table-cell;
    padding-left: 10px;
  }
  &__title {
    font-size: $region-font-size-xl;
    color: $region-color-text-weight;
    line-height: 24px;
  }
  &__info {
    font-size: $region-font-size;
    color: $region-color-text-label;
    line-height: 18px;
    margin-top: 10px;
  }
  &__inner {
    background-color: $region-empty-color-bg;
    box-shadow:$box-shadow;
    min-width: 155px;
    min-height: 100px;
    display: table;
    margin-top: 20px;
  }
  &__tips {
    font-size: $region-font-size;
    color: $region-color-text-label;
    line-height: 18px;
    margin-top: 20px;
  }
}


// 平铺的地域选择，主要用于购买，与购买页地域选择同步
.#{$prefix}region-pave {
  font-size    : 0;
  margin-bottom: -10px;
  //margin-top   : 18px;
}

.#{$prefix}region-pave .#{$prefix}segment {
  margin-right : -1px;
  margin-bottom: 0;
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.#{$prefix}region-pave .#{$prefix}segment .#{$prefix}btn {
  margin-bottom: 0;
  flex:1 0 auto;
}
// .#{$prefix}region-pave .#{$prefix}segment .#{$prefix}btn:last-child:first-child{
//   width:calc(100% + 2px);
// }

.#{$prefix}region-pave__item {
  display      : inline-block;
  position     : relative;
  margin-bottom: 10px;
}

.#{$prefix}region-pave__area-name {
  position  : relative;
  display   : block;
  font-size : $region-font-size;
  // top       : -18px;
  left      : 0;
  right     : 0;
  text-align: center;
  white-space: nowrap;
}

.#{$prefix}region-pave__area-name i {
  padding         : 0 2px;
  background-color: $region-empty-color-bg;
  position        : relative;
  color           : $region-color-text-label;
  margin: 0 8px;
}

.#{$prefix}region-pave__area-name::before {
  content         : '';
  display         : block;
  position        : absolute;
  left            : 5px;
  right           : 5px;
  top             : 50%;
  height          : 1px;
  background-color: $region-color-border;
}