@import "../../../styles/mixins.scss";

.marginLeft {
  margin-left: 2vh;
}

.marginBottom {
  margin-bottom: 2vh;
}

.marginTop {
  margin-top: 2vh;
}

// RAGEMP CEF fix static elements reorder with place new element bugs
.auth {
  span {
    will-change: transform;
  }
}

.auth {
  width: 100%;
  height: 100%;
  color: white;

  background-image: url("./images/background.png");
  background-size: cover;

  .wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .main {
      display: grid;
      grid-template-columns: 2fr 1fr;
      border-bottom: 0.1vh solid rgba(#fefefe, 0.1);

      .form {
        z-index: 1;
        max-width: 40vh;
        display: block;

        .text {
          margin-top: 2vh;
          margin-bottom: 2vh;
          color: #595961;
          font-weight: 500;
          font-size: 1.85vh;

          span {
            font-size: 1.85vh;
          }
        }

        .inputs {
          display: grid;

          .combine {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 2vh;

            & > img {
              margin-top: 2vh;
              align-self: center;
              margin-left: 1vh;
            }

            & > input {
              margin-top: 2vh;
            }
          }
        }

        .checkboxAndRestore {
          margin-top: 2vh;
          @include flex(center, center);
          justify-content: space-between;
        }

        .button {
          min-width: 20vh;
          width: 50%;
          margin-top: 4vh;
          margin-bottom: 4vh;
        }

        h1 {
          font-weight: 700;
          font-size: 3.89vh;
        }
      }
    }

    .character {
      position: absolute;
      right: -6.9vh;
      bottom: 8.2vh;
      height: 50vh;
    }

    .footer {
      margin-top: 2.5vh;
      display: grid;
      grid-template-columns: 15vh 1fr;
      grid-gap: 2vh;
      align-items: center;

      .logo {
        width: 100%;
      }

      span {
        will-change: auto;
        line-height: 140%;
        color: #484f5b;
        font-size: 1.11vh;
        letter-spacing: 0.02em;
      }
    }
  }

  // effects
}
