@import '../../../css/mixins.sass'

.noFooter
  padding-bottom: 0 !important

.loginModal, .registerModal
  display: flex
  flex-shrink: 0
  padding-bottom: 0px
  width: 400px

  .modalHeader
    height: 30px
    line-height: 40px
    margin-bottom: 20px

  .modalContent
    display: flex
    flex-direction: column

.submitButton
  margin-top: 15px

.authForm
  width: 100%

  &.activationForm
    padding-top: 10px

  .generalAuthError
    font-size: 14px
    color: $red
    margin-top: 15px

  .authInputError
    +smallCaps
    font-size: 14px
    background-color: $red2
    position: absolute
    right: 0px
    color: white
    height: 40px
    padding: 0 10px
    border-radius: 0 3px 3px 0
    line-height: 41px
    z-index: 10

  .weak
    background-color: $red2

  .good
    background-color: $orange3

  .strong
    background-color: $green4

  .authInputGroup
    position: relative
    margin-top: 10px

    &:first-of-type
      margin-top: 10px

    &:last-of-type
      margin-bottom: 15px

    .authInputLabelAndError
      display: flex
      flex-direction: row
      flex-grow: 1
      flex-shrink: 0

      .authInputLabel, .error
        +regularText
        margin-top: 0
        margin-bottom: 5px

      .error
        margin-left: auto
        color:
        display: flex

    .rememberMe
      float: left

    .forgotPassword
      +noSelect
      +linkStyle(14px)
      float: right
      margin-top: -2px
      margin-left: auto
      // font-weight: normal
      line-height: 18px

.orSeparator
  display: flex
  flex-direction: row
  font-size: 11px
  font-weight: 500
  color: $ui-line-grey
  text-transform: uppercase
  margin-top: 15px
  margin-bottom: -20px
  .or
    display: flex
    flex-grow: 1
    line-height: 20px
    align-items: center
    justify-content: center


.registerLink, .loginLink
  +linkStyle(14px)

.footerLabel
  display: flex
  align-items: center
  font-size: 14px

  label.error
    color: darkred
