@import '~@alifd/next/variables.scss';

// @import '~@alifd/next/lib/select/index.scss';
// @import '~@alifd/next/lib/tab/index.scss';
// @import '~@alifd/next/lib/checkbox/index.scss';
// @import '~@alifd/next/lib/balloon/index.scss';

// /*

$line-1-width: $line-1;
$line-2-width: $line-2;
$shadow-sd1-down: $shadow-1-down;
$corner-radius-r2: $corner-2;
$font-size-base-headline: $font-size-headline;
$font-lineheight-base-caption: $font-lineheight-2;
$input-size-l-font: $form-element-large-font-size;
$input-single-color: $input-text-color;
$btn-primary-border-color: $btn-pure-primary-border-color;
$btn-primary-bg-hover: $btn-pure-primary-bg-hover;
$btn-normal-bg-hover: $btn-pure-normal-bg-hover;
$card-padding: $card-padding-lr;
$dialog-shadow: $popup-global-shadow;
$menu-background-focused: $menu-background-hover;
$tab-content-padding-m: $s-4;
$tab-content-padding-s: $s-3;
$select-small-height: $form-element-small-height;
$select-icon-small-size: $form-element-small-icon-size;
$select-middle-height: $form-element-medium-height;
$select-icon-middle-size: $form-element-medium-icon-size;
$select-large-height: $form-element-large-height;
$select-icon-large-size: $form-element-large-icon-size;
$select-middle-font: $form-element-medium-font-size;
$select-large-font: $form-element-large-font-size;
$color-brand2-6: $color-link-1;
$color-brand1-5: lighten($color-brand1-6, 6%);
$color-brand7-9: lighten($color-brand1-6, 10%);
$color-brand1-8: lighten($color-brand1-9, 5%);
$color-brand1-10: desaturate(darken($color-brand1-9, 5%), 48%);
$color-b1-6: $color-brand1-1;
$color-n1-1: $color-white;
$color-n1-2: $color-fill1-1;
$color-n1-3: $color-fill1-3;
$color-n1-6: $color-line1-2;
$color-n2-3: $color-text1-3;
$color-f2-1: $color-error-2;
$select-border-width: $input-border-width;
$select-small-font: $form-element-small-font-size;

// $line-1-width: null;
// $line-2-width: null;
// $shadow-sd1-down: null;
// $corner-radius-r2: null;
// $font-size-base-headline: null;
// $font-lineheight-base-caption: null;
// $input-size-l-font: null;
// $input-single-color: null;
// $btn-primary-border-color: null;
// $btn-primary-bg-hover: null;
// $btn-normal-bg-hover: null;
// $card-padding: null;
// $dialog-shadow: null;
// $menu-background-focused: null;
// $tab-content-padding-m: null;
// $tab-content-padding-s: null;
// $select-small-height: null;
// $select-icon-small-size: $form-element-small-icon-size;
// $select-middle-height: null;
// $select-icon-middle-size: null;
// $select-large-height: null;
// $select-icon-large-size: null;
// $select-middle-font: null;
// $select-large-font: null;
// $color-brand2-6: null;
// $color-brand1-5: null;
// $color-brand7-9: null;
// $color-brand1-8: null;
// $color-brand1-10: null;
// $color-b1-6: null;
// $color-n1-1: null;
// $color-n1-2: null;
// $color-n1-3: null;
// $color-n1-6: null;
// $color-n2-3: null;
// $color-f2-1: null;
// $select-border-width: null;
// $select-small-font: null;
// // 变量初始化

@if (not(variable-exists($name: select-small-height) or variable-exists($name: select-border-width))) {
  $line-1-width: $line-1 !global;
  $line-2-width: $line-2 !global;
  $shadow-sd1-down: $shadow-1-down !global;
  $corner-radius-r2: $corner-2 !global;
  $font-size-base-headline: $font-size-headline !global;
  $font-lineheight-base-caption: $font-lineheight-2 !global;

  $input-size-l-font: $form-element-large-font-size !global;
  $input-single-color: $input-text-color !global;

  $btn-primary-border-color: $btn-pure-primary-border-color !global;
  $btn-primary-bg-hover: $btn-pure-primary-bg-hover !global;
  $btn-normal-bg-hover: $btn-pure-normal-bg-hover !global;

  $card-padding: $card-padding-lr !global;

  $dialog-shadow: $popup-global-shadow !global;

  $menu-background-focused: $menu-background-hover !global;

  $tab-content-padding-m: $s-4 !global;
  $tab-content-padding-s: $s-3 !global;

  $select-small-height: $form-element-small-height !global;
  $select-icon-small-size: $form-element-small-icon-size !global;
  $select-middle-height: $form-element-medium-height !global;
  $select-icon-middle-size: $form-element-medium-icon-size !global;
  $select-large-height: $form-element-large-height !global;
  $select-icon-large-size: $form-element-large-icon-size !global;

  $select-middle-font: $form-element-medium-font-size !global;
  $select-large-font: $form-element-large-font-size !global;

  @if not(variable-exists($name: color-brand2-6)) {
    $color-brand2-6: $color-link-1 !global;
  }
  @if not(variable-exists($name: color-brand1-5)) {
    $color-brand1-5: lighten($color-brand1-6, 6%) !global;
  }

  @if not(variable-exists($name: color-brand7-9)) {
    $color-brand7-9: lighten($color-brand1-6, 10%) !global;
  }

  @if not(variable-exists($name: color-brand1-8)) {
    $color-brand1-8: lighten($color-brand1-9, 5%) !global;
  }
  @if not(variable-exists($name: color-brand1-10)) {
    $color-brand1-10: desaturate(darken($color-brand1-9, 5%), 48%) !global;
  }

  $color-b1-6: $color-brand1-1 !global;
  $color-n1-1: $color-white !global;
  $color-n1-2: $color-fill1-1 !global;
  $color-n1-3: $color-fill1-3 !global;
  $color-n1-6: $color-line1-2 !global;
  $color-n2-3: $color-text1-3 !global;
  $color-f2-1: $color-error-2 !global;
}

@if not(variable-exists($name: select-border-width)) {
  $select-border-width: $input-border-width !global;
}

@if not(variable-exists($name: select-small-font)) {
  $select-small-font: $form-element-small-font-size !global;
}
/** 变量 end */

.#{$css-prefix}cn-address {
  & > [data-tag='gateway-wrapper'] {
    display: inline-block;
  }
  display: inline-flex;
}

.#{$css-prefix}cn-address-loading {
  white-space: nowrap;
}

.#{$css-prefix}cn-address-country {
  margin-right: $size-base * 2;
  min-width: $size-base * 32;
  &:last-of-type {
    flex-grow: 1;
    margin-right: 0;
  }
}

.#{$css-prefix}cn-address-domestic {
  flex-grow: 1;
  min-width: $size-base * 32;
}

.#{$css-prefix}cn-address-overlay {
  max-width: $size-base * 128;
  margin-top: -$line-1;
  overflow: hidden;
  border: $line-1 solid $color-line1-1;
  border-radius: $corner-2;
  background-color: $color-white;
  box-shadow: $shadow-1-down;
  &.#{$css-prefix}cn-address-fixed-width {
    min-width: $size-base * 128;
  }

  .#{$css-prefix}cn-address-overlay-toolbar {
    padding: $size-base * 3;
    text-align: right;
    border-top: $line-1 solid $color-line1-1;
  }

  .#{$css-prefix}tabs-content {
    padding: 0;
  }

  .#{$css-prefix}cn-address-tabpane {
    padding: $size-base * 4;
    .#{$css-prefix}cn-address-provletter {
      font-size: $font-size-body-1;
      padding-top: $size-base * 2;
      padding-left: $size-base * 0.5;
      width: $size-base * 9;
      min-width: $size-base * 9;
      flex-basis: $size-base * 9;
      color: $color-brand1-9;
    }
    .#{$css-prefix}cn-address-label {
      display: inline-block;
      padding: $size-base * 2;
      border: $line-1 solid transparent;
      color: $color-text1-4;
      background: none;
      outline: none;

      &:hover {
        background-color: $color-brand1-6;
        color: $color-white;
      }

      &.checked {
        border-color: $color-brand1-6;
        background-color: $color-brand1-1;
        &:hover {
          color: $color-brand1-6;
        }
      }
    }
  }
}

.#{$css-prefix}cn-address-multi.#{$css-prefix}select {
  width: 100%;
  & > .#{$css-prefix}select-inner {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 0;

    & > .#{$css-prefix}select-values {
      white-space: nowrap;
      flex: 1;
      width: 0;
      min-width: 0;
    }

    & > .#{$css-prefix}select-inner-item {
      display: inline-block;
      float: none;
    }
  }

  &.#{$css-prefix}cn-address-multi-nonempty {
    &::after {
      content: '';
      display: block;
      position: absolute;
      background: linear-gradient(90deg, transparent, $color-white 25%);
      right: 0;
      top: $select-border-width;
      right: $select-border-width;
      pointer-events: none;
    }
  }
  .#{$css-prefix}select-arrow {
    &.#{$css-prefix}icon,
    & .#{$css-prefix}icon {
      &::before {
        position: relative;
        z-index: 10;
      }
    }
  }

  @mixin varSize($size-symbol, $height, $icon-size) {
    &.#{$size-symbol},
    &.#{$css-prefix}#{$size-symbol} {
      $label-unit-size: $icon-size * 2 + 1;
      &::after {
        width: $label-unit-size * 3 - $select-border-width;
        height: $height - 2 * $select-border-width;
      }
      & > .#{$css-prefix}select-inner {
        & > .#{$css-prefix}select-inner-item:last-child {
          margin-right: $label-unit-size * 1.5;
          &::after {
            content: '';
            display: inline-block;
            width: $label-unit-size * 1.5;
            height: $height;
            position: absolute;
            left: 100%;
            top: 0;
          }
        }
        & > .#{$css-prefix}select-placeholder {
          line-height: $height - $select-border-width * 2;
        }
      }
      &.no-arrow {
        & > .#{$css-prefix}select-inner {
          &::after {
            width: $label-unit-size * 2;
          }
        }
      }
    }
  }
  @include varSize(small, $select-small-height, $select-icon-small-size);
  @include varSize(medium, $select-middle-height, $select-icon-middle-size);
  @include varSize(large, $select-large-height, $select-icon-large-size);
}

.#{$css-prefix}cn-address-multi-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  & > .#{$css-prefix}cn-address-multi-total {
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    & > .#{$css-prefix}cn-address-multi-total-num {
      color: $color-brand2-6;
    }
  }

  @mixin varSize($size-symbol, $height, $icon-size, $font-size) {
    &.#{$size-symbol} {
      & > .#{$css-prefix}cn-address-multi-total {
        line-height: $height - $select-border-width * 2;
        right: $icon-size * 2;
        font-size: $font-size;
        top: $select-border-width;
      }
    }
  }

  @include varSize(small, $select-small-height, $select-icon-small-size, $select-small-font);
  @include varSize(medium, $select-middle-height, $select-icon-middle-size, $select-middle-font);
  @include varSize(large, $select-large-height, $select-icon-large-size, $select-large-font);
}

.#{$css-prefix}cn-address-multi-overlay {
  height: $size-base * 64;
}

.#{$css-prefix}cn-address-multi-overlay,
.#{$css-prefix}cn-address-search-wrap {
  margin-top: -$line-1;
}

.#{$css-prefix}cn-address-search-wrap {
  & > .#{$css-prefix}menu {
    max-height: $size-base * 64;
    overflow: auto;
  }
}

.cn-addr-casmenu {
  display: flex;
  white-space: nowrap;
  box-shadow: $shadow-1-down;
  border: $line-1 solid $color-line1-1;
  background-color: $color-white;
  border-radius: $corner-2;
  & > .cn-addr-caslist {
    position: relative;
    border-right: $line-1 solid $color-line1-1;
    height: $size-base * 64;
    min-width: $size-base * 32;
    margin-left: -$line-1;
    overflow: auto;
    overflow-x: hidden;
    &:last-child {
      border-right: 0;
    }
    & > .cn-addr-casitem {
      position: relative;
      min-height: $size-base * 8;
      line-height: $size-base * 8;
      padding: 0 $size-base 0 $size-base * 3;
      cursor: pointer;
      background-color: transparent;
      transition: background-color 0.1s ease-in-out;
      &.cn-addr-casactive {
        background-color: $color-fill1-2;
      }
      .#{$css-prefix}checkbox-wrapper {
        vertical-align: top;
      }
      & > .#{$css-prefix}checkbox {
        position: absolute;
        & > input::before {
          content: '';
          display: block;
          height: $size-base * 8;
          position: absolute;
        }
      }
      & > .cn-addr-castext {
        display: inline-block;
        margin-left: $size-base + $checkbox-size;
        margin-right: $size-base * 2;
        vertical-align: middle;
      }
      & > .cn-addr-casexpand {
        position: absolute;
        right: $size-base;
      }
      & > .cn-addr-casitem-hot {
        position: absolute;
      }
      &::after {
        display: block;
        content: '';
        clear: both;
      }
    }
  }
}

// TODO: the typography still looks a bit weird
//  esp. w/ lots of items
.#{$css-prefix}cn-address-multi-allvalues {
  word-break: keep-all;
}

@mixin addressSelectIUSelectBox($select-padding, $select-icon-size, $select-font-size) {
  min-width: $select-padding + $select-icon-size * 2 + 1 + $select-font-size * 5;
}

.#{$css-prefix}cn-address-iu {
  & > .#{$css-prefix}cn-address-iu-list {
    & + .#{$css-prefix}cn-address-iu-list {
      margin-left: $size-base;
    }
  }
}

.cn-addr-casmenu.cn-addr-casmenu-iu > .cn-addr-caslist {
  height: $size-base * 96;
  & > .cn-addr-casitem {
    & > .cn-addr-castext {
      margin-left: $size-base * 0.5 + $icon-xs;
    }
  }
}

.cn-addr-casmenu > .cn-addr-caslist {
  & > .cn-addr-casitem {
    & > .cn-addr-caselect {
      position: absolute;
    }
  }
}