<script setup lang="ts">
import YlLogin from "@/pages/login/login.vue";
import YlRegister from "@/pages/login/register.vue";
import { loginData } from "@/store/store.js";
</script>

<template>
  <div class="background">
    <div class="login-div">
      <yl-login
        :class="{
          animate__animated: true,
          animate__fadeInLeft: loginData.login,
          animate__fadeOutLeft: !loginData.login,
        }"
      ></yl-login>
      <yl-register
        :class="{
          animate__animated: true,
          animate__fadeInRight: !loginData.login,
          animate__fadeOutRight: loginData.login,
        }"
      ></yl-register>
    </div>
  </div>
</template>

<style scoped>
.background {
  height: 100vh;
  width: 100vw;
  background: url("@/assets/image/background.webp") no-repeat;
  background-size: 100% 100%;
}
.login-div {
  width: 30rem;
  height: 35rem;
  background-color: #ffffff19;
  border-radius: 1rem;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  box-shadow: 10px 10px 15px #ffffff30;
  overflow: hidden;
}
</style>
