@use "./base"
@use "./loading"
@use "./colors" as c
@use "./tippy"


.main
  justify-content: center
  align-items: center

.center-login-container
  display: flex
  flex-flow: column
  justify-content: center
  align-items: center
  width: min(100vw, 450px)
  padding: max(1rem,3vw) 2rem
  margin: 8px
  box-shadow: 0px 2px 10px c.$darkest
  background-color: c.$darker
  border-radius: 5px

.login-form
  align-items: center
  flex: 1 1 auto
  width: 100%
  display: flex
  justify-content: space-around
  flex-flow: column

.data-input
  width: 100%

.form-input-container
  width: 100%
  display: flex
  flex-direction: column
  margin: 1em 0

.form-feedback
  width: 100%
  margin: -0.5em 0 -0.8em

.form-error
  color: red

.homeserver-question
  font-size: 0.8em

.homeserver-label
  display: flex
  justify-content: space-between
  align-items: flex-end

.homeserver-popup
  p 
    margin: 0.2em
  a
    &, &:hover, &:active
      color: white
      text-decoration: none
    &:hover
      color: #f00 //Placeholder 



@keyframes spin
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(180deg)

.loading-icon
  display: inline-block
  background-color: #ccc
  width: 12px
  height: 12px
  margin-right: 6px
  animation: spin 0.7s infinite

input, button
  font-family: inherit
  font-size: 17px
  background-color: c.$mild
  color: #eee
  width: 100%
  border-radius: 5px
  box-sizing: border-box
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out
  padding: 4px 9px
  border: 0px

input[type="text"],input[type="password"]
  border: 3px solid transparent
  margin: 0.4em 0px

  &:hover, &:focus
    border-color: c.$milder

button, input[type="submit"]
  padding: 7px

  &:hover
    cursor: pointer
    background-color: c.$milder

label
  font-size: 18px