@import "../styles/imgVar.less";
.auth {
  &__cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.5s;
    background: transparent;
    opacity: 0;
  }
  &__cover.show {
    background: rgba(0, 0, 0, 0.6);
    opacity: 1;
  }
  &__container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 99px);
    z-index: 20;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    background: rgba(255, 255, 255, 1);
    transform: translateY(calc(100vh - 99px));
    transition: all 0.5s;
    .auth__header {
      display: flex;
      padding: 0 60px;
      border-bottom: 1px solid rgba(237, 237, 237, 1);
      justify-content: space-between;
      line-height: 108px;
      .auth__title {
        font-size: 34px;
        font-weight: bold;
        color: rgba(17, 17, 17, 1);
      }
      .auth__selector {
        .auth__checkbox {
          display: none;
        }
        .auth__checkbox + .auth__checkbox-txt {
          display: inline-block;
          .auth__checkbox-icon {
            display: inline-block;
            width: 28px;
            height: 28px;
            margin: 0 12px 0 0;
            border: 1px solid rgba(253, 213, 53, 1);
            border-radius: 2px;
            background: #fff;
            background-size: 17px 12px;
            vertical-align: top;
            box-sizing: border-box;
          }
        }
        .auth__checkbox:checked + .auth__checkbox-txt {
          .auth__checkbox-icon {
            background: rgba(253, 213, 53, 1) url(@ic_tick_2x)
              no-repeat center;
            background-size: 17px 12px;
          }
        }
        .auth__checkbox.half:checked + .auth__checkbox-txt {
          .auth__checkbox-icon {
            background: rgba(253, 213, 53, 1);
          }
        }
      }
    }
    .auth__list {
      padding: 0 60px;
      height: calc(100% - 326px);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      .auth__item {
        line-height: 98px;
        border-bottom: 1px solid rgba(237, 237, 237, 1);
        .auth__header .auth__selector;
        .auth__selector {
          .auth__checkbox-txt {
            font-size: 30px;
            font-weight: 800;
            color: rgba(17, 17, 17, 1);
          }
          .auth__toggle-box {
            text-align: right;
            font-size: 0;
            .auth__toggle-icon {
              display: inline-block;
              width: 16px;
              height: 98px;
              background: url(@btn_ic_dropdown_2x) no-repeat
                center/16px 10px;
              transform: rotate(0);
              transition: all 0.5s;
              vertical-align: top;
            }
            .auth__toggle-icon.rotate {
              background: url(@btn_ic_dropdown_2x) no-repeat
                center/16px 10px;
              transform: rotate(-180deg);
            }
          }
        }
        .auth__sub-list {
          height: 0;
          overflow: hidden;
          padding-left: 42px;
          line-height: 76px;
          transition: all 0.5s;
          .auth__selector {
            .auth__checkbox-txt {
              font-size: 26px;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
            }
          }
        }
      }
    }
    .auth__btn {
      position: absolute;
      bottom: 45px;
      left: 60px;
      right: 60px;
      margin: auto;
      text-align: center;
      line-height: 86px;
      &-item {
        background: rgba(253, 213, 53, 1);
        border-radius: 8px;
      }
      &-item:first-child {
        margin-right: 30px;
        background: #2a2727;
        color: #fff;
      }
    }
  }
  &__container.show {
    transform: translateY(0);
  }
}