// 引入iconfont
@import '../iconfont/ark.iconfont.css';
@import '../iconfont/iconfont.css';

// Base
@body-bg: #fff;
@base-color: var(--primary-color);
@base-bg: #f4f4f4;
@base-border: #ebeef5;
@title-color: #444;
@title-size: 16px;
@title-bg: #f8f7f7;
@button-border: @base-color;
@button-transparent: transparent;
@button-transparent-font: @base-color;
@button-bg-font: #fff;
@button-bg: @base-color;
@button-radius: 3px;
@button-hover: #0068b7;
@button-transparent-hover: #0068b7;
// 表格
@head-bg : #f9fafc;
@table-thead-bg : #f5f6fa; //表头背景色
@table-thead-font-color: #575757;
@table-thead-font-size: 14px;
@table-td-stripe-bg : #f8f8f9; //斑马线颜色
@table-td-hover-bg : #B7E5F3; //hover颜色
@table-td-font-color: #000;
@table-td-font-size: 12px;
@table-td-highlight-bg : #B7E5F3; //选中色
// tab
@tab-bg: #fff;
@tab-font-size: 16px;
@tab-font-color: @base-color;
@tab-border-top-bg: @base-color;
@tab-border-botton-bg: @base-color;

// 所有button
.button(@color: @base-color, @fontColor: #fff) {
  .btn .one_button {
    .buttonBox {
      .buttonGroup button {
        border-color: @color;
        color: @color;
      }
    }
  }

  .ark-btn-fcdefault {
    color: @color;
    border-color: @color;

    &:hover {
      color: @color;
      border-color: @color;
      // opacity: 0.6;
    }
  }

  .ark-btn-posdefault {
    border-color: @color;
    background: @color;

    &:hover {
      color: @fontColor;
      background-color: @color;
      border-color: @color;
    }
  }

  .one_button .buttonBox {
    .buttonGroup {
      button.ark-btn {
        border-color: @color;
        color: @color;

        &:hover {
          background: #fff;
          // opacity: 0.6;
        }
      }
    }
  }

  // 促销
  .promactiquery,
  .promactiqueryList {

    .head_botton button,
    div.favoriteForm {
      border: 1px solid @color;
      background: @fontColor;
      color: @color;

      &.active {
        background: @color;
        color: @fontColor;
      }
    }

    .main_body .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
      color: @color;
    }

    .main_body .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
      color: @color;
    }
  }

  .buttonFk button[data-v-103544ac] {
    border: 1px solid @color;
    color: @color;
  }

  .row {
    .add {
      background: @color;
    }

    .import[data-v-39edb6c6] {
      border: 1px solid @color;
      background: @color;
      color: @fontColor;
    }
  }

  .basicInfo,
  .batchInfoSet,
  .infoSet,
  .giftSet {
    .row .form_button>button {
      border: 1px solid @color;
      color: @color;
    }
  }
}

// tab
.tab(@borderColor: @base-color, @color: @base-color) {
  .tab-list {
    .active {
      border-top: 2px solid @borderColor  !important;
      color: @color  !important;
    }
  }

  .emptying {
    i.iconfont {
      color: @color  !important;
    }
  }

  .table {
    .jordan-label-box .colorStyle {
      color: @color;
      border-bottom: 2px solid @color;
    }
  }
}

// checked
.checked(@color: @base-color) {
  .ark-checkbox-checked {

    &:hover .ark-checkbox-inner,
    .ark-checkbox-inner {
      border-color: @color;
      background-color: @color;
    }
  }

  .ark-radio-checked {
    &:hover {
      border-color: @color;
    }

    .ark-radio-inner {
      border-color: @color;

      &:after {
        background-color: @color;
      }
    }
  }

  .ark-radio-focus {
    box-shadow: none;
  }
}

// 头部导航
#nav {

  /* 导航背景颜色/导航鼠标经过背景颜色/其他按钮鼠标经过颜色 */
  .navBg(@color: #0f3365, @hoverColor: #092750, @liHoverBg: #0068b7) {
    .navigator {
      background-color: @color;

      .navigator-primary-menu {
        &:hover {
          background-color: @hoverColor;
        }
      }

      .navigator-sub-menu .menu-group {
        li.item {
          &:hover {
            background-color: @liHoverBg;
          }
        }
      }

      .nav-search {
        input {
          background-color: @color;
        }
      }

      .tag:hover {
        background-color: @hoverColor;
      }
    }
  }
}

// 侧边栏菜单 收藏和历史
#menu {

  /* 菜单背景色/菜单背景色鼠标经过/字体颜色/收起菜单鼠标经过字体颜色 */
  .historyFavorite(@bgColor: #0f3365, @hoverColor: #173155, @fontColor: #fff, @collectFontColor: #303133) {
    .history-and-favorite {

      //  background: @bgColor;
      .history-favorite-container {
        background-color: @bgColor;

        .favorite,
        .history {
          &::before {
            display: none;
          }

          div.label {
            color: @fontColor;
            background-color: @hoverColor;
            border-bottom: none;
          }

          ul {
            padding-left: 0;

            li {
              color: @fontColor;
              padding-left: 38px;
              padding-right: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              white-space: nowrap;

              &:hover {
                background-color: @hoverColor;
              }
            }
          }

          ul.onMouseOverShow li {
            color: @collectFontColor;

            &:hover {
              color: @fontColor;
            }
          }
        }
      }
    }
  }
}

// 搜索from
#from {
  .customizedFrom(@color: @base-color) {
    #content {
      .from-folding {
        background-color: @color;
      }

      .orderManageEdit .flodBtn {
        background: @color;
      }
    }
  }

  .standardFrom(@bgcolor: @base-color) {
    .downComponent-context {
      .tag-close {
        background-color: @bgcolor;
      }
    }
  }
}

// 定制界面
#customized {

  // 操作buttom
  .customBtn(@color: @base-color, @borderColor: @base-color) {
    .custom-main .custom-btn {
      .buttonGroup button.ark-btn {
        color: @color;
        border-color: @borderColor;

        &:hover {
          color: @base-color;
          border-color: @base-color;
        }
      }
    }
  }

  // malda
  .modal(@color: @base-color, @bgColor: @button-transparent, @button-border: @button-border, @border-color: @button-transparent-font) {

    // 定制弹框 底部按钮
    .dialog-footer {
      .ark-btn {
        color: @color;
        border-color: @color;
        background: @bgColor;

        &:hover {
          color: @color;
          border-color: @color;
          background: @bgColor;
          opacity: .6;
        }
      }
    }

    // 下载
    .downLoadModal {
      .ark-btn-primary {
        background-color: @color;
        border-color: @color;
      }

      .ark-btn-text:hover {
        color: @color;
      }
    }

    //定制弹框里面的所有 <Modal>
    .customizedModal {
      .ark-modal-footer {
        button {
          border: 1px solid @button-border;
          color: @border-color;
        }

        // .ark-btn-primary {
        //   background: @button-transparent;
        // }
      }
    }

    // fkdialog 促销
    .fkdialog {

      // .dialog_left{
      // }
      .dialog_center {
        .el-tabs {
          .el-tabs__header {
            .el-tabs__nav .el-tabs__active-bar {
              background-color: @base-color;
            }
          }
        }
      }

      .dialog-operation {
        .operation-hover:hover {
          color: fade(@base-color, 50%);
        }

        .operation-icon {
          color: @base-color;
        }
      }

      .dialog_right {
        .right_bottom {
          button {
            color: @base-color;
            border: 1px solid @base-color;

            &:last-child {
              background-color: @base-color;
              border: 1px solid @base-color;
              color: @button-bg-font;
            }
          }
        }
      }
    }
  }

  // tab
  .tab(@font-color: @base-color) {
    .ark-tabs-nav .ark-tabs-tab-active {
      color: @font-color;
    }

    .ark-tabs-ink-bar {
      background-color: @font-color;
    }
  }

  // 订单管理
  .orderAdd(@color: @base-color) {
    .jordan-label-box {
      .jordan-label {
        &.colorStyle {
          color: @color;
          border-bottom: 2px solid @color;
        }
      }

    }
  }

  // 促销
  .promotion (@color: @base-color) {

    .basicInfo,
    .batchInfoSet,
    .infoSet,
    .giftSet {
      .title i {
        color: @color;
      }
    }

    .stepsBars {
      .steps-item {
        .steps-head {
          .step-finish[data-v-1cab84ca] {
            color: @color;
          }
        }
      }
    }

    .addOrEditActi {
      .steps_content {
        .footer[data-v-2698e3ce] {
          color: @color;

          &>button {
            border: 1px solid @color;
            font-size: 12px;
            color: @color;
          }
        }
      }
    }
  }

  // 系统配置
  .system(@color: @base-color) {
    .ark-spin {
      color: @color;
    }

    .ark-tree-arrow i {
      color: @color;
    }

    .rightware_table {

      .el-tabs__item.is-active,
      .el-tabs__item:hover {
        color: @color;
      }
    }
  }
}

// 标准界面
#standard {

  // R3-buttonList
  .buttonList(@color: @base-color, @borderColor: @base-color) {
    .R3-buttonList {
      .ark-btn-fcdefault {
        color: @color;
        border-color: @borderColor;

        &:hover {
          color: @base-color;
          border-color: @base-color;
        }
      }
    }

    .standard_container .tabs_container .navButton button,
    .pro_desc .buttonGroup button,
    .functionPower .buttonGroup button {
      margin-bottom: 4px;
      line-height: 26px;
      height: 28px;
      border-radius: 4px;
      color: @color;
      border-color: @borderColor;

      &:hover {
        color: @base-color;
        border-color: @base-color;
      }
    }
  }

  // 水印
  .waterMarkContainer() {
    .textTip.smallText>div {
      width: 15px;
    }

    .waterMarkContainer .textTip.smallText {
      font-size: 14px;
      top: 36px !important;
      left: 13px !important;
      height: 30px;
    }

    .waterMarkContainer .textTip {
      position: absolute;
      transform: rotate(-30deg);
      font-size: 20px;
      top: 42px;
      left: 11px;
      width: 80px !important;
      display: flex;
      justify-content: space-around;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
  }

  // 单对象界面 上下结构
  .tab(@color: @base-color) {
    .ark-tabs-panels.ark-tabs-panels-singleCard {
      &>.ark-tabs-panels-bar {
        .ark-tabs-panels-tab-active {
          color: @color;
          border: none;
          border-bottom: 2px solid @color;
          margin-left: 0 !important;
        }
      }
    }
  }
}

// ark组件
#component {

  // 日历
  .calendar(@base-color) {

    .ark-picker-panel-body {
      em {
        color: @base-color;
      }

      .ark-date-picker-cells-cell-selected em,
      .ark-date-picker-cells-cell-selected:hover em {
        background: @base-color;
        color: #fff;
      }

      .ark-date-picker-cells-focused em {
        box-shadow: 0 0 0 1px @base-color inset;
      }

      .ark-btn-primary {
        background-color: @base-color;
        border-color: @base-color;
      }

      .ark-date-picker-cells-cell-today em:after {
        background: @base-color;
      }
    }
  }
  // page
  .page(@base-color) {
    .ark-page {

      .ark-page-item,
      .ark-page-prev,
      .ark-page-next {
        &:hover {
          border-color: @base-color;
          background-color: @base-color;
        }
      }

      .ark-page-item-active {
        border-color: @base-color;
        background-color: @base-color;
      }
    }

    .ark-select-dropdown-list {
      .ark-select-item-selected {
        color: @base-color;

      }

      .ark-select-item:hover {
        color: @base-color;
      }
    }
  }

}

//统一样式覆盖
body .ark-modal-content-drag .ark-modal-confirm-wrap {
  padding: 16px;
}

body .ark-modal-confirm-wrap {
  padding: 0;
}