// hx 登录组件的样式
@import "./../variable.scss";

// 登录注册模块样式
.pad-login,
.pad-register {
  top: 70%!important;
  opacity: .0;
  width: 360px;
  padding: $pm-bg;
  visibility: hidden;
  border: 1px solid $color-gray;
  background-color: white;
  border-radius: $border-radius-md!important;
  transition: all .4s;
  overflow: hidden;
  box-shadow: 0 $pm-sm*2 $pm-md*2  -13px rgba(0,0,0,.3);
  .row {
    padding: $pm-sm 0;
    text-align: center;
    &.main-tip{
      font-size: 20px;
      margin-bottom: 20px;
      color: $color-heavy;
      font-weight: 300;
    }
  }
  .tip {
    color: $color-heavy;
    display: block;
    width: 100%;
    text-align: left;
    font: {
      size: $font-sm;
      weight: 800;
    }
  }
  .logo-company{
    height: 2 * $height-navbar;
    width: 2 * $height-navbar;
    border-radius: 50% 50%;
  }
  input {
    border-radius: $border-radius-md;
    border: 1px solid $color-gray;
    line-height: $height-navbar - 2 * $pm-sm;
    height: $height-navbar - 2 * $pm-sm;
    padding: 0 $pm-sm;
    width: 100%;
    background-color: transparent;
    transition: all .4s;
    &:focus {
      border: 1px solid lighten($color-main-light, 10%);
    }
  }
  .btn-main {
    margin-top: $pm-md;
    width: 100%;
    height: $height-regular;
    background-color: $color-main;
    color: white;
    font-weight: 400!important;
    border-radius: $border-radius-md;
  }
  .btn-sub {
    margin-top: $pm-md;
    width: 100%;
    font-weight: 400;
    height: $height-regular;
    border-radius: $border-radius-md;
    background-color: transparent;
    box-shadow: none;
    color: $color-main;
    border: 1px solid transparent;
    cursor: pointer!important;
  }
  &.show {
    visibility: visible;
    top: 50%!important;
    opacity: 1.0;
  }
}

@media screen and (max-width: 640px) {
  .pad-login, .pad-register {
    width: 95%;
    padding: $pm-md;
    border: none;
    background-color: white;
    .tip {
      font-size: 14px;
      padding-left: $pm-sm;
      line-height: 28px;
    }
    box-shadow: none;
    .btn-sub, .btn-main {
      margin-top: $pm-sm;
      margin-bottom: 0;
      height: $height-normal!important;
    }
    .logo-company {
      height: $height-navbar;
      width: $height-navbar;
    }
    .row {
      padding: 0;
      input {
        background-color: transparent;
        border-radius: 0;
        border: none;
        font-size: 14px;
        border-bottom: 1px solid $color-gray;
        height: $height-normal;
        &:focus {
          border-bottom: 1px solid $color-main;
        }
      }
    }
  }
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
  .pad-login, .pad-register {
    width: 360px;
    padding: $pm-md;
  }
}

@media screen and (min-width: 1024px) {
  .pad-login, .pad-register {
    width: 360px;
    padding: $pm-bg;
  }
}