@import '../../styles/index.css';
@import '../../styles/inputForm.css';

.input--single{
  animation: none;
}

.auth__container{
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}


.auth__card{
  background-color: var(--color-background-dark);
  border: rgba(255, 255, 255, 0.1) 1px solid;
  border-radius: var(--radius-lg);
  padding: var(--spce-xlg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 450px;
  min-height: fit-content;
  width: 375px;
  color: var(--text-color-inactive);  
  gap: var(--spce-sm);
  box-shadow: 0px 0px 100px -50px lime;
}

.auth__top{
  color: var(--text-color-main);
}

.auth__switch{
  display: flex;
  background-color: var(--color-overlay);
  border-radius: var(--radius-med);
}

.auth__option{
  font-weight: 600;
  background-color: transparent;
  border: transparent;
  border-radius: var(--radius-med);
  padding: var(--spce-sm) var(--spce-xlg) var(--spce-sm) var(--spce-xlg);
  color: var(--text-color-inactive);
}

.active{
  color: var(--text-color-main);
  background-color: var(--color-highlight);
}


/* LOGIN CARD */
.auth__form form{
  display: flex;
  flex-direction: column;
  gap: var(--spce-xsm);
}

.auth__form{
  align-self: stretch;
}

.auth__form button{
  align-self: stretch;
  margin-top: var(--spce-sm);
}

.login--guest{
  color: var(--text-color-secondary);
  align-self: center;
  transition: transform 0.2s ease;
}

.login--guest:active{
  transform: scale(0.97);
}

.login__button{
  width: 100%;

}

#signup__form{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--spce-xsm) ;
}
#signup__form button{
  margin-top: var(--spce-xsm);
  align-self: stretch;
}

.auth__card__content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.auth__top__logo a{
  text-decoration: none;
  color: inherit;
}

/* reset password */
.auth__card__content--reset {
  /* flex-grow:1;
  justify-content: center; */
  gap: var(--spce-sm);
  /* flex:1; */
}

.auth__forgot{
  border: none;
  outline: none;
  width: fit-content;
  background-color: transparent;
  margin: 0 !important;
  color: var(--text-color-secondary) ;
  text-decoration: underline;

}

.auth__card__content--reset h3{
  color: var(--text-color-main);

}
.auth__card__content--reset form{
  display: flex;
  flex-direction: column;
  gap:var(--spce-sm);
  align-self: stretch;
  

}
.auth__card__content--reset__links{
  order: 1;
  display: flex;
  flex-direction: column;

}

.auth__card__subtext{
  text-align: center;
  color: var(--text-color-main);
}

/* Separator */
.separator{
  color: var(--text-color-secondary);

}

/* GOOGLE */
.google__anchor{

  text-decoration: none;
  width: 100%;

}

.google__image{
  width: 20px;
  height: 20px;
}

.google__button{
  padding: var(--spce-sm);
  gap: 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: var(--radius-med);
  outline: none;
  border: none;
}


.google__button:hover{
  opacity: 0.93;
}