@import '../settings/_Colors'
@import '../settings/_Typography'
@import '../settings/_Shadows'
@import '../settings/_Margins'
@import '../settings/_MediaSizes'

@keyframes fadeUpIn {
  0% {
    margin-top: 20px
    opacity: 0
  }
  100% {
    margin-top: 0
    opacity: 1
  }
}

.layout-login
  background-color: color-background
  background: url('../../png/background-sharp.png')
  background-attachment: fixed
  background-size: cover
  display: flex
  flex-direction: column
  flex-grow: 1
  .row
    flex-grow: 1
  .content-wrapper
    display: flex
    flex-direction: column
    justify-content: center
    align-content: stretch
    padding-top: 2 * margin-A4
    padding-bottom: 2 * margin-A4
    @media size-M
      width: 100%
      padding-left: grid-margin-M
      padding-right: grid-margin-M
    @media size-L
      width: width-L
    @media size-XL
      width: width-XL


.logo-wrapper
  display: flex
  align-self: flex-start

.title
  font-weight: weight-light
  text-align: left
  text-transform: none
  align-content: flex-start
  margin-bottom: margin-A2
  display: flex
  flex-grow: 1
  align-self: flex-start
  h4
    font-weight: weight-medium

/*
TODO
Extract to ModalBox component
also extract title (see above)
*/
.modal-box
  animation-delay: 500ms
  animation-duration: 550ms
  animation-fill-mode: forwards
  animation-name: fadeUpIn
  animation-timing-function: ease-in-out
  background-color: white
  border-radius: 3px
  box-shadow: shadow-box
  display: flex
  flex-direction: column
  padding-top: margin-A4
  padding-bottom: margin-A4
  opacity: 0
  z-index: 90
  align-self: stretch
  .title
    margin-bottom: margin-A2
    margin-top: margin-A2
  a
     margin: margin-A2 margin-A3
  @media size-M
    margin-left: 2 * (100%/12)
    margin-right: 2 * (100%/12)
  @media size-L
    width: 6 * column-L + 5 * gutter-L
    margin-left: auto
    margin-right: auto

.with-padding,
.modelbox
  &.with-padding
    @media size-M
      padding-left: (1 * 100%/12)
      padding-right: (1 * 100%/12)
    @media size-L
      padding-left: (1 * gutter-L + 1 * column-L)
      padding-right: (1 * gutter-L + 1 * column-L)

.copyright-hint
  text-align: center
  position: fixed
  bottom: margin-A4