@use "@/assets/css/mixins" as mixins;
@use "@/assets/css/constants" as constants;

[data-component=sign] {
  background-color: #D2D0DD;
  user-select: none;

  a {
    cursor: pointer;
  }

  a:hover {
    color: constants.$production-color;
  }

  .sign-box {
    position: relative;
    background-color: constants.$origin-color;
    width: 900px;
    height: 600px;
    overflow: hidden;
    border-radius: 12px;

    .left, .right {
      opacity: 1;
      transition: all 1s ease;

      > * {
        width: 100%;
        height: 100%;
      }

      &.hidden {
        opacity: 0;
      }

      > * {
        .title {
          margin-bottom: 20px;
          transform: translateY(-10px);

          .primary {
            font-size: 2.4em;
            font-weight: bolder;
            color: constants.$production-color;
          }

          .secondary {
            font-size: 1.2em;
          }
        }

        .form {
          width: 300px;
          font-size: 14px;

          button {
            font-weight: bolder;
          }

          .addition {
            justify-content: space-between;
            margin-bottom: 14px;

            > * {
              flex: 0 0 auto;
            }
          }

          .footer {
            text-align: center;

            a {
              color: constants.$production-color;
            }
          }
        }
      }

      .verify {
        a {
          color: constants.$production-color;
          font-weight: bolder;
        }
      }

      .sign-up, .sign-in, .forget {
        .footer {
          a {
            font-weight: bolder;
          }
        }
      }

      .sign-up, .forget {
        .retry, .success {
          margin-bottom: 16px;

          a {
            font-weight: bolder;
          }
        }
      }
    }

    .cover {
      position: absolute;
      height: 100%;
      width: 50%;
      background-color: #F3F4F8;
      transition: all 0.8s ease;

      .ball-box {
        position: relative;
        overflow: hidden;

        background-color: #F1F2F7;

        .ball {
          position: absolute;
          width: 128px;
          height: 128px;
          background-color: constants.$production-color;
          border-radius: 50%;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%) translateY(50%);
        }
      }

      .mask {
        transform: rotateZ(180deg);
        filter: blur(12px);

        .ball {
          width: 140px;
          height: 140px;
        }
      }
    }

    &.switch {
      .cover {
        transform: translateX(100%);
        transition: all 0.8s ease;
      }
    }
  }
}