@import "../../style/mixins/index";

@include b(login) {
  position: relative;
  border-radius: $--x-login-border-radius !important;
  overflow: hidden !important;
  .el-input__inner:focus {
    border-color: $--x-login-input-focus-color;
  }
  @include e(logo) {
    text-align: center;
    padding-bottom: 30px;
    img {
      width: 60%;
    }
  }
  @include e(tabs) {
    .el-tabs__header {
      margin-bottom: 30px !important;
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .el-tabs__active-bar {
      height: 3px;
      background-color: $--x-login-primary-color;
    }
    .el-tabs__item {
      font-size: 16px;
      font-weight: bold;
      color: $--x-login-tab-color;
      padding: 0 $--x-login-split;

      &:hover, &.is-active {
        color: $--x-login-tab-active-color;
      }
    }
    @include m(logo) {
      .el-tabs__header {
        display: none;
      }
    }
  }
  .el-card__body {
    padding: $--x-login-padding;
  }
  .el-form-item:last-child {
    margin-bottom: 0;
  }
  @include e(holder) {
    visibility: hidden;
  }
}

@include b(login-switcher) {
  width: 46px;
  height: 46px;
  cursor: pointer;
  position: absolute;
  right: $--x-login-split;
  top: $--x-login-split;
  z-index: 1;
  color: $--x-login-primary-color;
}

@include b(login-password) {
  @include e(forget) {
    text-align: right;
    .el-button--text {
      color: $--x-login-tab-color;
    }
  }
  @include e(submit) {
    background-color: $--x-login-primary-color !important;
    border-color: $--x-login-primary-color !important;
    width: 100%;
    &:hover {
      opacity: 0.8;
    }
  }
}

@include b(login-sms) {
  @include e(code) {
    width: 100px;
    height: 34px;
    position: relative;
    right: -4px;
    top: 1px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      display: inline-block;
      overflow: hidden;
    }
  }
  @include e(submit) {
    background-color: $--x-login-primary-color !important;
    border-color: $--x-login-primary-color !important;
    width: 100%;
    &:hover {
      opacity: 0.8;
    }
  }
}

@include b(login-qr) {
  text-align: center;
  position: relative;
  top: -15px;
  @include e(code) {
    min-height: 200px;
    position: relative;
  }
  @include e(vqr) {
    > img {
      width: 70%;
    }
  }
  @include e(unable) {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
  }
  @include e(wrapper) {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
  @include e(action) {
    font-size: 16px;
    color: $--x-login-primary-color;
    margin-bottom: 5px;
    font-weight: bold;
  }
  @include e(icon) {
    color: $--x-login-primary-color;
  }
  @include e(text) {
    font-size: 14px;
    color: $--x-login-tab-color;
  }
  @include e(tip) {
    font-size: 14px;
    color: $--x-login-tab-color;
  }
}

@include b(login-forget) {
  h3 {
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid $--x-login-split-color;
  }
  .x-login__holder-wrapper {
    display: none;
  }
  @include e(login) {
    text-align: right;
    .el-button--text {
      color: $--x-login-tab-color;
    }
  }
  @include e(submit) {
    background-color: $--x-login-primary-color !important;
    border-color: $--x-login-primary-color !important;
    width: 100%;
    &:hover {
      opacity: 0.8;
    }
  }
}

@include b(login-sms-code) {
  .el-form-item:last-child {
    margin-bottom: 22px;
  }
}