@import "../mixins/index";
@import "../variables/index";
@import "../components/tabs/var";

$prefix: 'tea-' !default;
$icon-prefix: '../../assets/image/tcs/';

$color-primary-0: #EBEFFD;
$color-primary-1: #B1BFF5;
$color-primary-2: #5272EA;
$color-primary-3: #3B5FE7;
$color-primary-4: #2B48C6;

$color-error-0: #FCEBED;
$color-error-1: #F4B1B6;
$color-error-2: #ED6B75;
$color-error-3: #E33B48;
$color-error-4: #C91C2A;
$color-error-5: #ED6B75;

$color-success-0: #E8F8F2;
$color-success-1: #85DBBE;
$color-success-2: #48C79C;
$color-success-4: #078D5C; // click
$color-success-5: #00A870; // normal

$color-warning-0: #FEF3E6;
$color-warning-1: #F7C797;
$color-warning-2: #F2995F;
$color-warning-3: #ED7B2F;
$color-warning-4: #D35A21;
$color-warning-5: #ED7B2F;

$color-neutral-1: #D6DBE3;
$color-neutral-2: #EBEDF1;
$color-neutral-3: #F1F2F5;
$color-neutral-4: #BCC4D0;
$color-neutral-5: #E3E6EB;

// 主题色 扩展
$color-primary: $color-primary-3;
$color-primary-hover: $color-primary-2;
$color-primary-focus: $color-primary-2;
$color-primary-active: $color-primary-4;
$color-primary-disabled: $color-primary-1;

// 警告色 扩展
$color-warning: $color-warning-3;
$color-warning-hover: $color-warning-2;
$color-warning-focus: $color-warning-2;
$color-warning-active: $color-warning-4;
$color-warning-disabled: $color-warning-1;

// 失败/错误色 扩展
$color-error: $color-error-3;
$color-error-hover: $color-error-2;
$color-error-focus: $color-error-2;
$color-error-active: $color-error-4;
$color-error-disabled: $color-error-1;

// 成功色 扩展
$color-success: $color-success-5;
$color-success-hover: $color-success-2;
$color-success-focus: $color-success-2;
$color-success-active: $color-success-4;
$color-success-disabled: $color-success-1;

// border/bg
$color-border: $color-neutral-1;
$color-border-hover: $color-primary-3;
$color-bg-disabled: $color-neutral-2;
$color-bg-active: $color-neutral-5;
$color-bg-hover: $color-neutral-3;
$color-bg-focus: $color-neutral-3;
$color-border-inner: $color-neutral-5;

// 文本 按钮
$btn-text-color-text: #151B26;
$btn-text-color-bg-hover: $color-neutral-2;
$btn-text-color-bg-active: $color-neutral-5;
$btn-link-color-bg-hover: $color-neutral-2;
$btn-link-color-bg-active: $color-bg-active;

$color-text-disabled: rgba(21, 27, 38, 0.3);
$color-text: #151B26;
$color-text-label: rgba(21, 27, 38, 0.6);
$color-text-weak: rgba(21, 27, 38, 0.4);

// #444951 => rgba(21, 27, 38, 0.8)
// #73767D => rgba(21, 27, 38, 0.6)
$icon-color-light: #73767D;
$icon-color-default: #444951;
$icon-color-primary: $color-primary;
$icon-color-error: $color-error;
$icon-color-warning: $color-warning;
$icon-color-success: $color-success;
$icon-color-weight: #151B26;
$icon-color-disabled: #B9BBBE;

// 圆角
$border-radius: 3px;

// 表单高度
$form-height: 32px;

$color-text-weight: rgba(21, 27, 38, 1);

$form-placeholder: rgba(21, 27, 38, 0.4);
$form-validate-success: url(#{$icon-prefix}success-icon.svg?fill=#{$icon-color-success});
$form-validate-error: url(#{$icon-prefix}error-icon.svg?fill=#{$icon-color-error});
$form-label-icon-info: url(#{$icon-prefix}plaint-icon-s.svg);

// 步骤
$step-item-color-text-disabled: rgba(21, 27, 38, 0.6);
$step-num-color-bg-disabled: $color-neutral-2;
$step-num-color-disabled: rgba(21, 27, 38, 0.8);
$step-num-color-border-disabled: $color-neutral-2;
$step-active-title-color: $color-primary-3;
$step-arrow-color: #a2a4a8;

// 分页
$pagination-turnbtn-color-bg-disabled: $color-neutral-3;

// 字号
$font-size-default: 12px !default;
$font-size-l: 14px !default;
$font-size-xl: 16px !default;
$font-size-xxl: 24px !default;
$font-size-xxll: 28px !default;
$font-size-xxxl: 36px !default;

$line-height-fz-default: 20px !default;

$line-height-fz-xxll: 42px !default; // fz-xxll 对应的行高
// 颜色
$tea-text-success-color: rgba(6, 121, 69, 1);
$tea-text-warning-color: rgba(186, 67, 27, 1);
$tea-text-danger-color: rgba(165, 23, 35, 1);
// 气泡 bubble
$bubble-border-radius: 3px;
$bubble-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
$bubble-dark-color: rgba(44, 54, 69, 1);
$bubble-dark-color-bg: $bubble-dark-color;
$bubble-dark-color-border: $bubble-dark-color;
$bubble-error-color: rgba(252, 235, 237, 1);
$bubble-error-color-bg: $bubble-error-color;
$bubble-error-color-border: $bubble-error-color;
// 抽屉 drawer
$drawer-body-padding: 16px;
$drawer-font-h3-size: $font-size-xl;
$dialog-box-shadow-s: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
.#{$prefix}drawer__header {
  .#{$prefix}h3 {
    font-size: $drawer-font-h3-size;
  }
}

.#{$prefix}drawer {
  color: $color-text;
}

// 提示 Message
$toast-border-radius: 3px;
$toast-default-border-style: 0;
$toast-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
$toast-height: 40px;
$toast-padding: 0 16px;
$toast-default-position-top: 50px;
.#{$prefix}toast {
  box-shadow: $toast-shadow;
}

// 对话框 Modal
$dialog-border-radius: 3px;
$dialog-btnwrap-align: right;
$dialog-headertitle: $font-size-xl;
$dialog-inner-padding: 24px;
.#{$prefix}dialog__inner {
  .#{$prefix}dialog__header + .#{$prefix}dialog__body {
    .#{$prefix}media {
      margin-top: -24px;
      margin-left: -4px;

      .#{$prefix}media__left {
        padding-left: 4px;
        padding-right: 12px;
      }
    }
  }
}

.#{$prefix}media__body {
  .#{$prefix}dialog__messagetext {
    margin-top: 8px;
  }
}

.#{$prefix}dialog__inner {
  .#{$prefix}dialog__header {
    .#{$prefix}btn--icon {
      top: -7px;
      right: -8px;
    }
  }
}

// 通知 notification
$notification-success-color-bg: rgba(232, 248, 242, 1);
$notification-success-footer-color-bg: rgba(232, 248, 242, 1);
$notification-error-color-bg: rgba(252, 235, 237, 1);
$notification-error-footer-color-bg: rgba(252, 235, 237, 1);
$notification-warning-color-bg: rgba(254, 243, 230, 1);
$notification-warning-footer-color-bg: rgba(254, 243, 230, 1);
$notification-border-radius: 3px;
$notification-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12);
$notification-font-title-size: 16px;
$notification-font-title-weight: bold;
$notification-color-text-label-title: #000000;
$text-success-color: #067945 !important;
$text-warning-color: #BA431B !important;
$text-danger-color: #A51723 !important;
$notification-space: 4px;
$notification-body-padding: 18px $notification-space*10 18px $notification-space*4;
$notification-footer-padding: $notification-space*2 $notification-space*4 $notification-space*3 $notification-space*3;
$notification-footer-link-padding: $notification-footer-padding;
$notification-header-title-line-height: 25px;
.#{$prefix}notification {
  border-radius: $notification-border-radius;

  &__header {
    &-title {
      font-weight: $notification-font-title-weight;
    }
  }
}

.#{$prefix}notification {
  &__body {
    .#{$prefix}-text-success {
      color: $text-success-color;
    }

    .#{$prefix}-text-warning {
      color: $text-warning-color;
    }

    .#{$prefix}-text-danger {
      color: $text-danger-color;
    }
  }
}

// popconfirm
$popconfirm-messagetitle-margin-bottom: 15px;
// tooltip
$tooltip-box-shadow: 0px 0px 16px 0px rgba(54, 58, 80, 0.16);
.#{$prefix}tooltip {
  box-shadow: $tooltip-box-shadow;
}

// list
$list-submenu-background-image: url(../../assets/image/slice/svg/arrow-right--line.svg?fill=#{$icon-color-default});
// dropdown
$dropdown-border-radius: 3px;
$box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12);
$dropdown-box-color-text: #151B26;
$dropdown-header-after-icon: url(#{$icon-prefix}arrow-down-line.svg?fill=#{$icon-color-primary});
$dropdown-input-search-border-radius: 3px 3px 0 0;
$dropdown-icon-arrowdown: url(#{$icon-prefix}arrow-down-line.svg?fill=#{$icon-color-default});
$dropdown-link-icon-arrow-down: url(#{$icon-prefix}arrow-down-line.svg?fill=#{$icon-color-primary});
.#{$prefix}dropdown .#{$prefix}dropdown-default .#{$prefix}icon-arrowdown {
  background-image: url(../assets/image/tcs/arrow-down-line.svg?fill=#{$icon-color-default});
}

.#{$prefix}dropdown {
  .#{$prefix}dropdown__header {
    .#{$prefix}icon-arrowdown {
      background-image: url(../assets/image/tcs/arrow-down-line.svg?fill=#{$icon-color-default});
    }
  }
}

.#{$prefix}dropdown.is-disabled {
  .#{$prefix}dropdown__header {
    .#{$prefix}icon-arrowdown {
      background-image: url(../assets/image/tcs/arrow-down-line.svg?fill=#{$icon-color-default});
    }
  }
}

.#{$prefix}dropdown {
  .#{$prefix}dropdown-link {
    .#{$prefix}icon-arrowdown {
      background-image: url(../assets/image/tcs/arrow-down-line.svg?fill=#{$icon-color-primary});
    }
  }
}

.#{$prefix}dropdown-box {
  ul {
    border-radius: $dropdown-border-radius;
  }
}

.#{$prefix}dropdown-box .#{$prefix}search--icon-front .#{$prefix}input--search,
.#{$prefix}dropdown-box .#{$prefix}search--simple .#{$prefix}input--search {
  border-radius: $dropdown-input-search-border-radius;
}

// transfer
$color-bg-hover: #F8F8FA;
$color-bg-gray-hover: #F8F8FA;
$transfer-color-text: #151B26;
$transfer-content-border-radius: 3px;
$transfer-content-border: 1px #E3E6EB solid;
$transfer-content-padding: 12px;
$transfer-content-backgroud-color: #ffffff;
$transfer-inner-border-width: 0;
$transfer-color-border: #E3E6EB;
$transfer-inner-table-header-padding: 16px;
$transfer-pagination-turnbtn-bg: #F8F8FA;
$transfer-icon-color: rgba(21, 27, 38, 0.6);
$transfer-icon-arrowright: url(../../assets/image/slice/svg/arrow-right--line.svg?fill=#{$icon-color-default});
$transfer-icon-arrowleft: url(../../assets/image/slice/svg/arrow-right--line.svg?fill=#{$icon-color-default});
$transfer-icon-arroleft-rotate: rotate(180deg);
$transfer-table-head-color-bg: #ffffff;
$transfer-content-height: 404px;
$icon-transfer: url(../assets/image/tcs/transfer-icon-tcs.svg);

// media
$media-body-line-height: 20px;
$media-left-padding-right: 26px;

// card
$card-multiple-margin-top: 16px;
$card-title-margin-bottom: 20px;

// accordion
$accordion-header-margin-bottom: 6px;
.tcs-accordion--link {
  .#{$prefix}accordion__header-title {
    color: #3B5FE7;
  }

  .#{$prefix}icon-arrowdown {
    background-image: url(../assets/image/tcs/arrow-down-line.svg?fill=#3B5FE7);
  }

  .#{$prefix}icon-arrowup {
    transform: rotate(180deg);
    background-image: url(../assets/image/tcs/arrow-down-line.svg?fill=#3B5FE7);
  }
}

.tcs-accordion--surround {
  .#{$prefix}accordion__header {
    background-color: #F8F8FA;
    border: 1px solid #E3E6EB;
    padding-left: 20px;
    margin-bottom: 0;
    border-radius: 3px;

    .#{$prefix}icon-arrowdown {
      background-image: url(../assets/image/tcs/arrow-down-line.svg?fill=#{$icon-color-default});
    }

    .#{$prefix}icon-arrowup {
      transform: rotate(180deg);
      background-image: url(../assets/image/tcs/arrow-down-line.svg?fill=#{$icon-color-default});
    }
  }

  .is-active .#{$prefix}accordion__header {
    border-radius: 3px 3px 0 0;
  }

  .#{$prefix}accordion__body {
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 0 0 3px 3px;
    border: 1px solid #E3E6EB;
    border-top: 0;
  }
}

// metrics
$metrics-board-padding: 12px 24px;
$metrics-board-header-line-height: $line-height-fz-default;
$metrics-board-value-line-height: $line-height-fz-xxll;
$metrics-board-info-line-height: $line-height-fz-default;
$metrics-board-header-margin-bottom: 0px;

$list-margin-bottom: 7px;
// progress
$progress-color-base-bg: $color-neutral-1;


.#{$prefix}transfer {
  &__content {
    border-radius: $transfer-content-border-radius;
    border: $transfer-content-border;
    padding: $transfer-content-padding;
    background-color: $transfer-content-backgroud-color;

  }

  &__inner {
    border-left-width: $transfer-inner-border-width;
    border-right-width: $transfer-inner-border-width;
    border-top-width: $transfer-inner-border-width;

    .#{$prefix}table {
      thead {
        tr {
          background-color: $transfer-table-head-color-bg;
        }
      }
    }

    .#{$prefix}table__header {
      border-bottom: 1px solid $transfer-color-border;
    }

    .#{$prefix}table__box {
      tbody {
        td {
          color: $transfer-color-text;
        }
      }
    }
  }

  &__separator {
    display: table-cell;
    text-align: center;
    vertical-align: middle;

    .#{$prefix}pagination {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      &__turnbtn {
        border-radius: $transfer-content-border-radius;
        border: 1px solid $transfer-color-border;
        background-color: $transfer-pagination-turnbtn-bg;
      }
    }

    .#{$prefix}icon-transfer {
      background-image: $icon-transfer;
    }
  }

  .#{$prefix}icon-arrowright {
    background-image: url(../assets/image/slice/svg/arrow-right--line.svg?fill=#{$icon-color-default});
  }

  .#{$prefix}icon-arrowleft {
    background-image: url(../assets/image/slice/svg/arrow-right--line.svg?fill=#{$icon-color-default});
    transform: $transfer-icon-arroleft-rotate
  }
}

// segment
$segment-color-bg-hover: $color-neutral-2 !default;

$btn-text-padding: 3px 8px;
;
$btn-link-padding: 3px 8px;
$btn-icon-padding: 8px;
$btn-icon-color-bg-hover: $color-neutral-3;
$btn-icon-color-bg-active: $color-bg-active;
$btn-weak-color-bg-hover: $color-neutral-3;

$list-border-radius: 0;
$list-color-text-weight: $btn-text-color-text;
$list-color-bg-hover: $color-neutral-2;
$list-color-bg-gray: $color-neutral-3;

$dropdown-header-padding-left: 12px;
$dropdown-header-padding-right: 28px;
$dropdown-header-icon-right: 11px;
$dropdown-color-bg-hover: $color-neutral-2;

$search-padding-left: 12px;

$select-padding-left: 12px;
$select-refresh-icon-margin-left: 0;
$select-refresh-icon-border: none;
$select-refresh-icon-padding: 8px;
$select-refresh-loading-btn-padding: 8px;
$select-color-bg-hover: $color-neutral-2;

$form-icon-valid-margin-left: 16px;
$help-text-inline-margin-left: 10px;

$form-control-base-padding: 12px;

$input-padding: 12px;

// 滑块 slider
$slider-base-bg-hover-color: #BCC4D0;
$slider-base-color-bg-hover: $slider-base-bg-hover-color !default;
$slider-base-color-after-bg-hover: $slider-base-bg-hover-color; // 开关 switch
$switch-color-bg-disabled: $color-neutral-5;
$slider-height-top: 0;

// 标签 tag
$tag-icon-dismiss-right: 4px !default;

$tag-line-height: 15px !default;
$tag-padding: 2px 4px 2px 4px !default;
$tag-margin: 2px 8px 0px 0 !default;
$tag-edit-padding: 0 25px 0 8px !default;

$tag-primary-color-text: $color-primary-3 !default;
$tag-primary-dark-color-bg: $color-primary-3 !default;
$tag-primary-dark-color-border: $color-primary-3 !default;

$tag-warning-color-text: $color-warning-3 !default;
$tag-warning-dark-color-bg: $color-warning-3 !default;
$tag-warning-dark-color-border: $color-warning-3 !default;

$tag-error-color-text: $color-error-5 !default;
$tag-error-dark-color-bg: $color-error-5 !default;
$tag-error-dark-color-border: $color-error-5 !default;
$tag-search-is-active-width: 70% !default;

// 搜索标签 tag-search
$tag-search-tag-padding: 2px 24px 0 4px;
$tag-search-right: 5px !default;
$tag-search-bottom: 7px !default;

.#{$prefix}search.#{$prefix}search--tags.is-active .#{$prefix}search__inner {
  position: static !important;
}

// breadcrumb
$breadcrumb-color-text: $color-text-label;
$breadcrumb-current-text-weight: 500;

// 表格 table
$table-header-color-bg: #F8F8FA !default;
$table-pagination-padding: 16px 20px !default;
$table-icon-sort-color: $icon-color-light !default;
$table-icon-filter-color: $icon-color-light !default;
$table-icon-dismiss-color: $icon-color-light !default;
$table-header-font-weight: $font-weight-normal !default;
$table-all-color-border: $color-neutral-5 !default;
$table-icon-margin-left: 0 !default;

$table-search-right-btn-icon-width: auto !default;
$table-search-right-btn-icon-height: auto !default;
$table-search-right-btn-icon-padding: 7px !default;
$table-search-right-btn-icon-margin-left: 8px !default;
$table-search-right-btn-icon-border-radius: $border-radius !default;
$table-search-right-btn-icon-border: 1px solid $color-neutral-1 !default;
$table-search-right-btn-icon-bg-color: #fff !default;
$table-sort-icon-bg-image: url(#{$icon-prefix}sort-arrow-icon.svg?fill=#{$table-icon-sort-color});
$table-sort-icon-hover-bg-image: url(#{$icon-prefix}sort-arrow-icon-hover.svg?fill=#{$icon-color-weight}) !default;
$table-filter-icon-bg-image: url(#{$icon-prefix}/filtrate-icon.svg?fill=#{$table-icon-filter-color}) !default;
$table-filter-icon-hover-bg-image: url(#{$icon-prefix}filtrate-icon-hover.svg?fill=#{$icon-color-weight}) !default;

.#{$prefix}table__sortbtn .#{$prefix}icon-sort {
  background-image: url(../assets/image/tcs/sort-arrow-icon.svg?fill=#{$table-icon-sort-color});
}

.#{$prefix}table__filterbtn .#{$prefix}icon-filter {
  background-image: url(../assets/image/tcs/filtrate-icon.svg?fill=#{$table-icon-filter-color});
}

.#{$prefix}table__action-panel {
  // 表格头部有search和无search的内容的右侧icon
  .tce-component-sel-search-wrap + div, // 没有tag的头部 右侧icon的样式
  .#{$prefix}search--tags + div, // 有tag的头部 右侧icon的样式
  .#{$prefix}justify-grid__col--right, // 没有search输入框的时候样式
  .#{$prefix}justify-grid__col--right > div:not(.tce-component-sel-search-wrap):not(.#{$prefix}search--tags):not(.#{$prefix}search) {
    & > button.#{$prefix}btn--icon {
      width: $table-search-right-btn-icon-width !important;
      height: $table-search-right-btn-icon-height !important;
      padding: $table-search-right-btn-icon-padding !important;
      margin-left: $table-search-right-btn-icon-margin-left !important;
      border-radius: $table-search-right-btn-icon-border-radius;
      border: $table-search-right-btn-icon-border;
      background-color: $table-search-right-btn-icon-bg-color;
      background-position: center;
    }

    & > button.#{$prefix}btn.#{$prefix}btn--icon:hover {
      background-color: $color-neutral-2;
    }

    .#{$prefix}icon-dismiss {
      background-image: url(../assets/image/tcs/clear-icon.svg?fill=#{$table-icon-dismiss-color});
    }
  }

  // 表头2个连着的筛选框组件
  .tce-component-sel-search-wrap
  > .#{$prefix}dropdown
  > .#{$prefix}dropdown__header {
    border-radius: $border-radius 0 0 $border-radius;
    border-right: 0;
  }

  .tce-component-sel-search-wrap
  > .#{$prefix}form--search
  > .#{$prefix}search
  > .#{$prefix}search__inner
  > .#{$prefix}input {
    border-radius: 0 $border-radius $border-radius 0;
  }

  // 因搜索框比 tea 的搜索框高度有变化，触发 tag 搜索框的搜索按钮式会发生位置偏移
  .#{$prefix}justify-grid__col--right {
    & > div.#{$prefix}search.#{$prefix}search--tags.is-active .#{$prefix}btn--search{
      right: 9px;
      bottom: 8px;
    }
  }
}

// 操作按钮和搜索框距离表格的间距
$table-action-panel-margin-bottom: 16px !default;

$calendar-color-bg-hover: $color-neutral-2;
$calendar-color-text-disabled: $color-text-weak;
$date-time-picker-after-icon: url(#{$icon-prefix}calendar.svg?fill=#{$icon-color-default});

$inputnum-add-icon: url(#{$icon-prefix}add-icon.svg?fill=#{$icon-color-default});
$inputnum-minus-icon: url(#{$icon-prefix}minus-icon.svg?fill=#{$icon-color-default});
$inputnum-add-disabled-icon: url(#{$icon-prefix}add-icon.svg?fill=#{$icon-color-disabled});
$inputnum-minus-disabled-icon: url(#{$icon-prefix}minus-icon.svg?fill=#{$icon-color-disabled});
$inputnum-color-bg-hover: $color-neutral-2;

$icon-refresh: url(#{$icon-prefix}icon-refresh.svg?fill=#{$icon-color-default});
$icon-refresh-blue: url(#{$icon-prefix}icon-refresh.svg?fill=#{$icon-color-primary});
$icon-setting: url(#{$icon-prefix}setting-icon.svg?fill=#{$icon-color-default});
$icon-download: url(#{$icon-prefix}icon-download.svg?fill=#{$icon-color-default});
$icon-search: url(#{$icon-prefix}icon-search.svg?fill=#{$icon-color-default});
$icon-notice: url(#{$icon-prefix}notice-icon.svg?fill=#{$icon-color-default});
$icon-notice-blue: url(#{$icon-prefix}notice-icon-blue.svg?fill=#{$icon-color-primary});
$icon-info: url(#{$icon-prefix}plaint-icon.svg);
$icon-help: url(#{$icon-prefix}icon-help.svg?fill=#{$icon-color-default});
$icon-show: url(#{$icon-prefix}show-icon.svg?fill=#{$icon-color-default});
$icon-hide: url(#{$icon-prefix}hide-icon.svg?fill=#{$icon-color-default});
$icon-error: url(#{$icon-prefix}error-icon.svg?fill=#{$icon-color-error});
$icon-error-l: url(#{$icon-prefix}m-error-icon.svg?fill=#{$icon-color-error});
$icon-success: url(#{$icon-prefix}success-icon.svg?fill=#{$icon-color-success});
$icon-success-l: url(#{$icon-prefix}m-success-icon.svg?fill=#{$icon-color-success});
$icon-warning: url(#{$icon-prefix}warning-s.svg?fill=#{$icon-color-warning});
$icon-warning-l: url(#{$icon-prefix}m-error-icon.svg?fill=#{$icon-color-warning});
$icon-pending-gray: url(#{$icon-prefix}s-waiting-info.svg?fill=#{$icon-color-default});
$icon-pending: url(#{$icon-prefix}s-waiting-info.svg?fill=#{$icon-color-warning});
$icon-info-blue: url(#{$icon-prefix}s-info-blue.svg?fill=#{$icon-color-primary});
$icon-info-blue-l: url(#{$icon-prefix}info-blue.svg?fill=#{$icon-color-primary});
$icon-sort: url(#{$icon-prefix}sort-arrow-icon.svg?fill=#{$icon-color-default});
$icon-sort-up: url(#{$icon-prefix}sort-arrow-up-icon.svg?fill=#{$icon-color-default});
$icon-sort-down: url(#{$icon-prefix}sort-arrow-down-icon.svg?fill=#{$icon-color-default});
$icon-btn-back: url(#{$icon-prefix}reback.svg?fill=#{$icon-color-primary});
$icon-plus: url(#{$icon-prefix}add-icon.svg?fill=#{$icon-color-default});
$icon-minus: url(#{$icon-prefix}minus-icon.svg?fill=#{$icon-color-default});
$icon-copy: url(#{$icon-prefix}copy-icon.svg?fill=#{$icon-color-default});
$icon-chart-column: url(#{$icon-prefix}chart-column.svg?fill=#{$icon-color-default});
$icon-chart-column-hover: url(#{$icon-prefix}chart-column.svg?fill=#{$icon-color-primary});
$icon-drop: url(#{$icon-prefix}icon-drop.svg?fill=#{$icon-color-default});
$icon-filter: url(#{$icon-prefix}filtrate-icon.svg?fill=#{$icon-color-default});
$icon-dismiss: url(#{$icon-prefix}clear-icon.svg?fill=#{$icon-color-default});
$icon-delete: url(#{$icon-prefix}rubbish-gray.svg?fill=#{$icon-color-default});
$icon-check: url(#{$icon-prefix}check-icon.svg?fill=#{$icon-color-default});
$icon-check-s: url(#{$icon-prefix}check-small-icon.svg?fill=#{$icon-color-default});
$icon-close: url(#{$icon-prefix}btn-dismiss.svg?fill=#{$icon-color-default});
$icon-close-s: url(#{$icon-prefix}remove-icon.svg?fill=#{$icon-color-default});
$icon-arrow-up: url(#{$icon-prefix}page-prev.svg?fill=#{$icon-color-default});
$icon-arrow-down: url(#{$icon-prefix}page-next.svg?fill=#{$icon-color-default});
$icon-arrow-left: url(#{$icon-prefix}left-arrow-icon.svg?fill=#{$icon-color-default});
$icon-arrow-right: url(#{$icon-prefix}right-arrow-icon.svg?fill=#{$icon-color-default});
$icon-first-page: url(#{$icon-prefix}first-page.svg?fill=#{$icon-color-default});
$icon-last-page: url(#{$icon-prefix}last-page.svg?fill=#{$icon-color-default});
$icon-arrow-up-line: url(#{$icon-prefix}arrow-right-line-m.svg?fill=#{$icon-color-default});
$icon-arrow-down-line: url(#{$icon-prefix}arrow-right-line-m.svg?fill=#{$icon-color-default});
$icon-arrow-left-line: url(#{$icon-prefix}arrow-right-line-m.svg?fill=#{$icon-color-default});
$icon-arrow-right-line: url(#{$icon-prefix}arrow-right-line-m.svg?fill=#{$icon-color-default});
$icon-pencil: url(#{$icon-prefix}pencil-icon.svg?fill=#{$icon-color-default});
$icon-cur-active: url(#{$icon-prefix}date-cur-active.svg?fill=#{$icon-color-default});
$icon-cur: url(#{$icon-prefix}date-cur.svg?fill=#{$icon-color-default});
$icon-and: url(#{$icon-prefix}icon-and.svg?fill=#{$icon-color-success});
$icon-not: url(#{$icon-prefix}icon-not.svg?fill=#{$icon-color-default});
$icon-external-link: url(#{$icon-prefix}external.svg?fill=#{$icon-color-primary});
$icon-folder-open: url(#{$icon-prefix}folder-open.svg?fill=#{$icon-color-default});
$icon-folder-close: url(#{$icon-prefix}folder-close.svg?fill=#{$icon-color-default});
$icon-daily: url(#{$icon-prefix}daily-icon.svg?fill=#{$icon-color-default});
$icon-database: url(#{$icon-prefix}database.svg?fill=#{$icon-color-default});
$icon-data-sheet: url(#{$icon-prefix}datasheet.svg?fill=#{$icon-color-default});
$icon-relationship: url(#{$icon-prefix}relationship.svg?fill=#{$icon-color-default});
$icon-relationship-blue: url(#{$icon-prefix}relationship.svg?fill=#{$icon-color-primary});
$icon-table: url(#{$icon-prefix}icon-table.svg?fill=#{$icon-color-default});
$icon-table-blue: url(#{$icon-prefix}icon-table.svg?fill=#{$icon-color-primary});
$icon-fullscreen: url(#{$icon-prefix}fullscreen.svg?fill=#{$icon-color-default});
$icon-fullscreen-quit: url(#{$icon-prefix}fullscreen-exit.svg?fill=#{$icon-color-default});
$icon-status-network: url(#{$icon-prefix}status-network-large-#{$img-color}.svg);
$icon-status-network-s: url(#{$icon-prefix}status-network-small-#{$img-color}.svg);
$icon-status-blank: url(#{$icon-prefix}status-blank-large-#{$img-color}.svg);
$icon-status-blank-s: url(#{$icon-prefix}status-blank-small-#{$img-color}.svg);
$icon-status-chart: url(#{$icon-prefix}status-chart-blank-large-#{$img-color}.svg);
$icon-status-chart-s: url(#{$icon-prefix}status-chart-blank-small-#{$img-color}.svg);
$icon-status-loading: url(#{$icon-prefix}status-loading-large-#{$img-color}.svg);
$icon-status-loading-s: url(#{$icon-prefix}status-loading-small-#{$img-color}.svg);
$icon-status-no-permission: url(#{$icon-prefix}status-no-permission-large-#{$img-color}.svg);
$icon-status-no-permission-s: url(#{$icon-prefix}status-no-permission-small-#{$img-color}.svg);
$icon-status-pay: url(#{$icon-prefix}status-pay-large-#{$img-color}.svg);
$icon-status-pay-s: url(#{$icon-prefix}status-pay-small-#{$img-color}.svg);
$icon-status-search: url(#{$icon-prefix}status-search-large-#{$img-color}.svg);
$icon-status-search-s: url(#{$icon-prefix}status-search-small-#{$img-color}.svg);
$icon-status-upload: url(#{$icon-prefix}status-upload-large-#{$img-color}.svg);
$icon-status-upload-s: url(#{$icon-prefix}status-upload-small-#{$img-color}.svg);
$icon-phone: url(#{$icon-prefix}phone-icon.svg?fill=#{$icon-color-default});

.#{$prefix}icon-code {
  background-image: url(../assets/image/tcs/code.svg?fill=#{$icon-color-default})
}

.#{$prefix}icon-data-solid {
  background-image: url(../assets/image/tcs/data-solid-sheet.svg?fill=#{$icon-color-light})
}

.#{$prefix}icon-and-primary {
  background-image: url(../assets/image/tcs/icon-and.svg?fill=#{$icon-color-primary})
}

.#{$prefix}icon-data-solid-primary {
  background-image: url(../assets/image/tcs/data-solid-sheet.svg?fill=#{$icon-color-primary})
}

.#{$prefix}icon-plus-primary {
  background-image: url(../assets/image/tcs/add-icon.svg?fill=#{$icon-color-primary})
}

.#{$prefix}icon-plus-light {
  background-image: url(../assets/image/tcs/add-icon.svg?fill=#{$icon-color-light})
}

.#{$prefix}icon-dismiss-light {
  background-image: url(../assets/image/tcs/clear-icon.svg?fill=#{$icon-color-light})
}

.#{$prefix}icon-error-solid {
  background-image: url(../assets/image/tcs/error-solid-icon.svg?fill=#{$icon-color-error});
}

.#{$prefix}icon-success-solid {
  background-image: url(../assets/image/tcs/success-solid-icon.svg?fill=#{$icon-color-success});
}

.#{$prefix}icon-check-circle {
  background-image: url(../assets/image/tcs/check-circle.svg?fill=#{$color-primary-3});
}

.#{$prefix}icon-close-circle {
  background-image: url(../assets/image/tcs/close-circle.svg?fill=#{$color-primary-3});
}

.#{$prefix}icon-hover-show {
  background-image: url(../assets/image/tcs/show-icon.svg?fill=#{$color-primary-3});
}

.#{$prefix}icon-card {
  background-image: url(../assets/image/tcs/card.svg?fill=#{$icon-color-default});
}

.#{$prefix}icon-hover-card {
  background-image: url(../assets/image/tcs/card.svg?fill=#{$color-primary-3});
}

.#{$prefix}icon-hover-table {
  background-image: url(../assets/image/tcs/card.svg?fill=#{$color-primary-3});
}

.#{$prefix}icon-arrow-down-line-primary {
  background-image: url(../assets/image/tcs/arrow-down-line.svg?fill=#{$icon-color-primary});
}

.#{$prefix}icon-arrow-back {
  background-image: url(../assets/image/tcs/back-small.svg?fill=#{$icon-color-light});
}

// pagination
$pagination-height: 30px !default;
$pagination-operate-arrow-dropdown: url(#{$icon-prefix}page-next.svg?fill=#{$icon-color-light}) !default;
$pagination-operate-arrow-dropdown-header-icon-top: $pagination-height * 4/18px !default;
// pagination-text-margin
$pagination-text-margin: 0 8px 0 0 !default;
$pagination-first-btn-margin-left: 8px;

// layout
$layout-header-color-bg: transparent !default;
$layout-header-border-bottom-bg: $color-neutral-1 !default;
$layout-header-title-padding: 12px 24px !default;
$layout-body-padding: 24px !default;
$layout-header-icon-back-margin-right: 8px;

.tcs-layout-header--borderless {
  .#{$prefix}layout__header-title {
    padding: 12px 24px 0 !important;
    margin-bottom: -12px !important;
    border-bottom: none !important;
  }
}

// text
$font-weight-bold: 500;

// grid
$grid-gutter: 12px;

// 字体
@font-face {
  font-family: 'TCloud Number';
  src: url("../assets/font/tcloudnumber-regular.svg");
}

// body font family
body {
  font-family: 'TCloud Number', Roboto, "San Francisco", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragina Sans GB", "WenQuanYi Micro Hei", 'microsoft yahei ui', "microsoft yahei", sans-serif;;
}

.#{$prefix}form .#{$prefix}form__label .#{$prefix}icon {
  width: 12px;
  height: 12px;
  vertical-align: -2px !important;
}

/********************************* card *************************************/

// tabs
$tabs-color-text-weight: $step-num-color-disabled;
$tabs-color-text-disabled: $color-text-weak;
$tabs-ceiling-tabpanel-padding-top: 76px;
$tabs-primary-color-border: $color-primary-3;
$tabs-color-bg: $color-bg;
$tabs-card-height: 50px;
$tabs-card-color-bg: $color-bg-hover;
$tabs-card-color-text-weight: $tabs-color-text-weight;
$tabs-card-tab-active-text-weight: $font-weight-bold;
$tabs-bar-height: 60px;
$tabs-bar-tab-active-height: 32px;
$tabs-color-bg-hover: $color-bg-hover;
$tabs-ceiling-margin-top: 0;
.tcs-tabs--card {
  border-radius: $border-radius;

  & .#{$prefix}tabs__tabpanel {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .#{$prefix}tabs__tabbar:before {
    border: none;
  }

  .#{$prefix}tabs__tabitem {
    height: $tabs-card-height;
    line-height: $tabs-card-height;
    margin-right: 0;
  }

  .#{$prefix}tabs__tabbar {
    background-color: $tabs-card-color-bg;
  }

  .#{$prefix}tabs__tab.is-active:after,
  .#{$prefix}tabs__tab:hover:after {
    border: none;
  }

  .#{$prefix}tabs__tab {
    color: $tabs-card-color-text-weight;
    padding: 0 21px;
  }

  .#{$prefix}tabs__tab.is-disabled {
    color: $tabs-color-text-disabled;
  }

  .#{$prefix}tabs__tab.is-active {
    background-color: $tabs-color-bg;
    font-weight: $tabs-card-tab-active-text-weight;
    color: $tabs-color-text-weight;
    position: relative;
  }

  .#{$prefix}tabs__tab.is-active:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    border-top: 3px solid $tabs-primary-color-border;
  }

  .#{$prefix}tabs__tabitem:hover {
    .#{$prefix}tabs__remove {
      z-index: 1;

      > .#{$prefix}icon-dismiss {
        background-image: url(../assets/image/tcs/close-circle-filled.svg) !important;
      }
    }
  }

  .#{$prefix}tabs__scroll-area.is-scrolling {
    .#{$prefix}tabs__backward,
    .#{$prefix}tabs__forward {
      height: 100%;
    }
  }
}

.#{$prefix}tabs--vertical.tcs-tabs--card {
  .#{$prefix}tabs__tab.is-active:before {
    bottom: 0;
    right: auto;
    border-left: 3px solid $tabs-primary-color-border;
    border-top: none;
  }

  .#{$prefix}tabs__tab.is-active::after, > .#{$prefix}tabs__tabbar .#{$prefix}tabs__tab:hover::after {
    display: none;
  }

  > .#{$prefix}tabs__tabbar {
    min-width: 100px;

    .#{$prefix}tabs__tab {
      padding-left: 21px;
      text-align: left;
    }
  }

  .#{$prefix}tabs__addons {
    height: $tabs-card-height;
    line-height: $tabs-card-height;
    position: inherit;
    text-align: center;
  }

  .#{$prefix}tabs__scroll-area {
    margin-right: 0 !important;
  }
}

/******************************* bar ******************************/
.#{$prefix}tabs.#{$prefix}tabs--ceiling.tcs-tabs--bar {
  & > .#{$prefix}tabs__tabbar {
    padding: 0;
    position: relative;
  }

  & > .#{$prefix}tabs__tabpanel {
    padding: 16px 0;
  }
}

.tcs-tabs--bar {
  & > .#{$prefix}tabs__tabbar {
    border-radius: $border-radius;
    background-color: $tabs-color-bg;

    & .#{$prefix}tabs__tablist {
      & .#{$prefix}tabs__tabitem:first-child {
        margin-left: 24px;
      }

      & .#{$prefix}tabs__tabitem {
        height: $tabs-bar-height;
        line-height: $tabs-bar-height;

        .#{$prefix}tabs__tab {
          padding: 0 15px;
          border-radius: 16px;
          height: $tabs-bar-tab-active-height;
          /* display: flex;
              align-items: center; */
          line-height: $tabs-bar-tab-active-height;
          vertical-align: middle;
        }

        .#{$prefix}tabs__tab:hover {
          background-color: $tabs-color-bg-hover;
        }

        .#{$prefix}tabs__tab.is-active {
          font-weight: 400;
          background-color: $tabs-primary-color-border;
          color: $tabs-color-bg;
        }

        .#{$prefix}tabs__tab::after {
          border-bottom: none;
        }

        .#{$prefix}tabs__tab:hover::after,
        .#{$prefix}tabs__tab.is-active::after {
          border-bottom: none;
        }
      }
    }
  }

  & > .#{$prefix}tabs__tabpanel {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  & > .#{$prefix}tabs__tabbar::before {
    border-bottom: none;
  }
}

.#{$prefix}tabs {
  & > .#{$prefix}tabs__tabpanel {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

.#{$prefix}action-state {
  .#{$prefix}text-danger {
    color: $color-error-3 !important;
  }

  a {
    color: $color-primary-3 !important;
  }
}

.#{$prefix}form--readonly {
  .#{$prefix}form__item {
    .#{$prefix}form__label, .#{$prefix}form__controls--text {
      padding-top: 0;
      padding-bottom: 12px;
    }
  }
}

.tce-component-tea2-fieldsmanager {
  width: 652px !important;

  .tip_box {
    position: relative;
    padding: 14px 48px !important;
    margin-bottom: 20px !important;
    color: #1d34a6 !important;
    border-radius: 3px !important;
    border: none !important;
    background: rgba(235, 239, 253, 1) !important;

    &::before {
      content: '';
      position: absolute;
      left: 24px;
      top: 15px;
      width: 16px;
      height: 16px;
      background-image: url(../assets/image/tcs/info-circle.svg);
    }
  }

  .list-wrap {
    li {
      margin-bottom: 8px !important;
      span {
        display: inline-block;
        width: 122px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.#{$prefix}card{
  box-shadow: 0 2px 4px 0 rgba(54, 58, 80, 0.12) !important;
}

.#{$prefix}calendar__table .#{$prefix}pagination__turnbtn:hover {
  background: $color-neutral-2;
  border-radius: $border-radius;
}

// 下拉箭头
//.#{$prefix}pagination__operate .#{$prefix}dropdown .#{$prefix}dropdown-default .#{$prefix}icon-arrowdown {
//  background-image: url(../assets/image/slice/svg/page-next.svg?fill=#{$icon-color-default});
//}

$list-option-li-padding: 6px 12px;
$list-group-label-padding: 0 12px;
$list-group-li-padding-left: 24px;

.#{$prefix}search.#{$prefix}search--tags {
  margin-right: 0 !important;
}

.#{$prefix}tag {
  .#{$prefix}text-label + span {
    margin-left: 4px;
  }
}