$prefix-cls: "#{$namespace}-login-page";

.#{$prefix-cls} {
  // background: $color-background;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;

  &__unlock {
    transform: translate(-50%, 0);
    position: absolute;
    top: 0;
    left: 50%;
    // height: 16px;
    color: $color-text-title;
    cursor: pointer;
    z-index: 2000;
    // absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center
    // sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2
  }

  // &__hour,
  // &__minute {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   border-radius: $br-xl;
  //   background-color: $color-gray-4;
  //   color: $color-gray-9;
  //   font-weight: 700;
  //   width: 40%;
  //   height: 80%;

  //   @media screen and (max-width: $screen-md) {
  //     span:not(.meridiem) {
  //       font-size: 160px;
  //     }
  //   }

  //   @media screen and (min-width: $screen-md) {
  //     span:not(.meridiem) {
  //       font-size: 160px;
  //     }
  //   }

  //   @media screen and (max-width: $screen-sm) {
  //     span:not(.meridiem) {
  //       font-size: 90px;
  //     }
  //   }

  //   @media screen and (min-width: $screen-lg) {
  //     span:not(.meridiem) {
  //       font-size: 220px;
  //     }
  //   }

  //   @media screen and (min-width: $screen-xl) {
  //     span:not(.meridiem) {
  //       font-size: 260px;
  //     }
  //   }

  //   @media screen and (min-width: $screen-2xl) {
  //     span:not(.meridiem) {
  //       font-size: 320px;
  //     }
  //   }
  // }
  // &__hour {
  //   margin-right: 20px;
  // }

  &-entry {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: $color-text-secondary-text;
    backdrop-filter: blur(3px);

    &-content {
      box-sizing: content-box;
      width: 260px;
      padding: 20px;
      background-color: $color-background;
      border-radius: $br-lg;
    }

    &__header {
      text-align: center;

      &-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin: 0 auto;
        overflow: hidden;
        background: $color-gray-1;
      }
      &-iconfont {
        // width: 70px;
        // height: 70px;
        font-size: 70px;
        // border-radius: 50%;
        color: $color-gray-13;
        // background: $color-gray-1;
      }

      &-name {
        // display: inline-block;
        margin-top: 5px;
        color: $color-text-title;
        font-weight: 500;
      }
    }

    &__err-msg {
      display: inline-block;
      margin-top: 10px;
    }

    .login-btn {
      display: flex;
    }
  }
}
