@use './variate.scss' as *;

// loading
.vxe-loading {
  background-color: rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;
  font-size: 1.5rem;
  z-index: 10000 !important;
}

// toast
.type--message {
  z-index: 10000 !important;
  .vxe-modal--box {
    background-color: rgba(0, 0, 0, 0.65) !important;
    box-shadow: 0px 4px 8px 0px rgba(#000, 0.08);
    border: none !important;
    padding: 5px 10px;

    .vxe-modal--content {
      color: #fff;
      font-size: 16px;
    }
  }
}

// 下拉框的面板
.vxe-select--panel {
  padding-top: 10px !important;

  .vxe-select--panel-wrapper {
    background-color: #fff;
    border-radius: 8px;
    border: none !important;
    overflow: hidden;

    .vxe-select-option,
    .vxe-select--empty-placeholder {
      padding: 5px 10px;
      height: 40px;
      line-height: 30px;

      &.is--selected {
        background-color: $primary-color;
        color: #fff;
      }
    }
  }
}

.vxe-form--group {
  width: 100%;
  .vxe-form--group-title {
    border-bottom: 1px solid $primary-color;
    .vxe-form--item-title-content {
      .vxe-form--item-title-label {
      }
    }
  }
}

// 对话框
.type--confirm,
.type--alert,
.type--modal {
  position: relative;
  .vxe-modal--box {
    background-color: #fff;
    border-radius: 8px;
    border: none !important;
    overflow: hidden;
    .vxe-modal--header {
      padding-top: 8px;
      border: none !important;
      background-color: #fff !important;

      .vxe-modal--header-title {
        font-size: 16px;
        color: #444;
        padding-left: 15px;
      }

      .vxe-modal--header-right {
        display: flex;
        align-items: center;
        gap: 15px;
        padding-right: 15px;

        .trigger--btn {
          background-color: #eee !important;
          border-radius: 50%;
          margin: 0;
          i {
            font-size: 14px;
          }
        }
      }
    }

    .vxe-modal--body-default {
      padding-left: 15px !important;
      padding-right: 15px !important;

      .vxe-icon-question-circle-fill::before {
        color: #e44e4e !important;
        content: '\e785';
      }

      .vxe-modal--content {
        font-size: 16px;
      }
    }
  }
}

$fz: 16px;

// 表单组件
.vxe-form--item {
  .vxe-form--item-title {
    // padding-right: 0;

    &.align--right {
      // padding-right: 10px;
    }
  }
}

$form_radius: 4px;
$form_placeholder: #969799;
$form_bg: #f5f5f5;
$form_bg_disabled: #e1e1e1;
$form_icon: #444;
$form_color: #000;

.mj-form-text {
  background-color: $form_bg_disabled;
}
.mj-form-text-clickable {
  background-color: $form_bg !important;
  cursor: pointer !important;
}
.mj-form-text-placeholder {
  color: $form_placeholder !important;
}

.mj-table-select {
  border-radius: $form_radius;
  color: $form_color !important;
  height: 34px !important;
  border: none !important;
  background-color: $form_bg !important;
  font-size: 14px !important;

  &.disabled {
    background-color: $form_bg_disabled !important;

    .placeholder {
      color: $form_placeholder !important;
    }
  }

  .placeholder {
    color: $form_placeholder !important;
  }

  > .right > .el-icon svg {
    color: $form_icon !important;
  }
}

.el-input {
  .el-input__wrapper {
    border: none !important;
    // border-radius: $form_radius !important;
    background-color: $form_bg !important;
    box-shadow: none !important;
  }
  .el-input-group__prepend {
    box-shadow: none !important;
    background-color: $primary-color !important;
    color: #fff !important;
  }
  input::placeholder {
    color: $form_placeholder !important;
  }
}

$border-radius: 4px;
$border-color: rgb(240, 242, 245, 0.9);
$family: inherit;
$title-family: inherit;
$color: #4b4b68;
$fz: 16px;
$btn_w: 40px;
$btn_h: 40px;
$btn_gap: 4px;
$btn_bg: rgba(0, 0, 0, 0.65);
$gap: 8px;
$icon_color: #ccefff;

.vxe-textarea--inner,
.vxe-input,
.vxe-date-range-picker {
  border: none !important;
  border-radius: $form_radius !important;
  background-color: $form_bg !important;
  box-shadow: none !important;

  .vxe-input--suffix {
    background-color: $form_bg !important;
    i {
      color: $form_icon !important;
    }
  }

  &.is--disabled {
    .vxe-input--inner {
      background-color: $form_bg_disabled !important;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;

      &::placeholder {
        color: $form_placeholder !important;
      }
    }

    .vxe-input--suffix {
      background-color: $form_bg_disabled !important;
    }
  }

  .vxe-input--inner {
    color: $form_color !important;
    padding-left: 10px;

    &[disabled] {
      background-color: $form_bg_disabled !important;

      &::placeholder {
        color: $form_placeholder !important;
      }
    }
  }

  input {
    background: transparent !important;
  }

  input::placeholder {
    color: $form_placeholder !important;
  }
}

.vxe-date-range-picker--suffix {
  background: transparent !important;
}

.vxe-form {
  .vxe-form--item-title-label {
    color: #444 !important;
    font-size: $fz;
  }
  .vxe-form--item-title-content:before {
    color: #e32929 !important;
    font-size: $fz;
  }

  .vxe-textarea--inner {
    color: #000 !important;
    &::placeholder {
      color: $form_placeholder !important;
    }
  }
}

.vxe-textarea--inner,
.vxe-radio--label,
.vxe-input--inner {
  font-size: $fz !important;
}

.vxe-form--item--valid-error-msg {
  font-size: 14px !important;
}

.vxe-form-item--valid-error-theme-beautify {
  padding: 1px 4px !important;
}

.vxe-button.type--button.theme--primary:not(.is--disabled) {
  background-color: $primary-color !important;
  border-color: $primary-color !important;

  &:hover {
    opacity: $hover-opacity;
  }
}

.vxe-grid {
  .vip-expired {
    color: $error-color;
  }
}

// 悬浮框
.vxe-pager {
  margin-top: 16px;
  background-color: transparent !important;
  height: $btn_h;

  .vxe-pager--wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: $btn_gap;

    .vxe-pager--sizes,
    .vxe-pager--jump {
      margin: 0 $gap;
    }

    .vxe-pager--goto-text,
    .vxe-pager--classifier-text,
    .vxe-pager--count,
    .vxe-pager--total {
      font-size: $fz;
      font-family: $family;
    }

    i {
      color: $icon_color !important;
      font-weight: bolder;
    }

    .vxe-select {
      border-radius: $border-radius;
      font-family: $family;
      background-color: $btn_bg;
      width: 150px !important;

      .vxe-input {
        font-family: $family;
        background-color: transparent !important;
        font-size: $fz;
        height: $btn_h;
        input {
          color: #fff !important;
        }

        .vxe-input--wrapper,
        .vxe-input--suffix {
          background-color: transparent !important;
        }
      }
    }

    .vxe-pager--jump .vxe-input {
      margin: 0 $gap;
      background-color: #fff !important;
      input {
        color: $color !important;
      }
    }

    .vxe-pager--jump .vxe-input,
    button {
      font-size: $fz;
      width: $btn_w;
      height: $btn_h;
      border-radius: $border-radius;
      font-family: $family;
      background-color: $btn_bg;

      &.vxe-input {
        width: $btn_w + 15px;
      }

      &.is--disabled {
        box-shadow: none;
        i {
          color: #bfbfbf !important;
        }
      }

      &.vxe-pager--num-btn {
        color: $color;
        background-color: #fff;
        box-shadow: none;
        &.is--active {
          font-weight: normal;
          background-color: $icon_color;
        }
      }
    }
  }

  .vxe-select--panel {
    bottom: 40px !important;
    .vxe-select--panel-wrapper {
      background-color: rgba(0, 0, 0, 0.65);
      .vxe-select-option--wrapper {
        max-height: inherit;
      }

      .vxe-select-option {
        color: #ccd4d4;
        font-size: $fz;
        height: $btn_h;
        display: flex;
        align-items: center;
        justify-content: center;

        &.is--selected {
          background-color: $icon_color;
          color: $color;
        }
      }
    }
  }

  button:not(.is--disabled) {
    color: #fff;
  }
}
