

.layer{
  // padding:30px;
  // width: 320px;
  padding: 30px 30px 20px 30px;

  input[type="text"],
  input[type="password"],
  input[type="submit"]{
    width:100%;
    margin-bottom:15px;
    // border-radius: 50px;
  }
}

.header{
  padding:20px 20px 0 20px;
}

.other-sign-in{
  text-align: center;
  overflow: hidden;
  margin:20px 0 20px 0;

  > span{

    position: relative;
    padding:0 15px 0 15px;
    // color:#797979;

    &:before {
      content: "";
      position: absolute;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: rgb(228, 228, 228);
      top: 50%;
      right: 100%;
      width: 5000px;
    }

    &:after {
      content: "";
      position: absolute;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: rgb(228, 228, 228);
      top: 50%;
      left: 100%;
      width: 5000px;
    }

  }

}

.social{
  
  text-align: center;
  margin-bottom:10px;

  a, span{
    display: inline-block;
    // margin:0 25px 0 25px;
    // color:#797979;
    height: 30px;
    line-height: 30px;
    // &:hover{
      // color:#4170ea;
    // }
  }

  .icon{
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 40px;
  }

  .weibo{
    @extend .icon;
    background-image: url(./images/weibo.png);
  }

  .qq{
    @extend .icon;
    background-image: url(./images/qq.png);
  }

  .github{
    @extend .icon;
    background-image: url(./images/github.png);
  }

  .wechat{
    @extend .icon;
    background-image: url(./images/wechat.png);
  }

}

.agreement{
  text-align: center;
  margin:30px 0 0 0;
}

:global(#dark-theme){

  .other-sign-in{
    > span{
      &:before {
        border-bottom-color: #393f4e;
      }
  
      &:after {
        border-bottom-color: #393f4e;
      }
    }
  }

}