/* ==========================================================================
   Login KMS
   ========================================================================== */

.login
  position: relative
  min-height: 100vh
  +flex(center, center)
  background-color: $darkerBlue
  background-image: url("#{$baseImagePath}/background.svg")
  background-size: cover
  background-position: center


  .placeholder
    width: 80%
    max-width: 400px
    padding: 20px 40px
    background-color: white
    color: $darkBlue

    .header
      margin-bottom: 20px
      +flex(space-between, center)

      &.small
        margin-bottom: 20px

      img
        display: block
        width: 45px
        height: 45px
        margin-left: auto

      h2
        width: calc(100% - 45px)
        margin: 0
        color: $darkBlue
        font-size: 1.2rem
        font-weight: bold

    label
      font-size: 0.8rem

    /* Alert messages
      ========================================================================== */

    .warning
      padding: 7px 12px
      margin: 8px 0
      border: 1px solid $darkBlue
      font-size: 0.7rem
      color: $darkBlue

    input
      width: 100%
      height: 40px
      margin: 0 0 8px
      border-radius: 4px
      font-size: 0.7rem
      color: $darkBlue

      text-indent: 10px
      border: $lighter-gray solid 1px
      transition: box-shadow 0.4s

      &:focus
        outline: 0
        box-shadow: rgba($neonBlue, .75) 0 0 5px 0

      &[type=submit]
        background-color: $darkBlue
        border: none
        color: white
        text-align: center
        cursor: pointer
        transition: background-color 0.4s

        &:hover
          background-color: lighten($darkBlue, 10%)

    a
      color: $darkBlue
      font-size: 0.7rem
      font-weight: semibold()

    .login__submit
      margin-top: 20px