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


.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


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
    background-color: c.$milder

label
  font-size: 18px