/*==========================================================================
  Subscribe
  ========================================================================== */

/**
  * Subscribe block
  *
  * 1. Centers the subscribe sentence and button vertically and horizontally
  * 2. Add illustrations on left side of subscribe block
  * 2. Add illustrations on right side of subscribe block
  */

.subscribe-block
  position: relative

  &:before /* 2 */
    content: url('/img/structure/subscribe/illustration_01.png')
    +transform(scale(0.3))
    +transform-origin(top left)
    +respond-to-width($mdGridBreakpoint)
      +transform(scale(0.24))
    position: absolute
    left: -30px
    top: 30px
    +respond-to-width(650)
      left: -60px
      top: -20px
    z-index: 10

  &:after /* 3 */
    content: url('/img/structure/subscribe/illustration_02.png')
    +transform(scale(0.3))
    +transform-origin(top right)
    +respond-to-width($mdGridBreakpoint)
      +transform(scale(0.24))
    position: absolute
    right: -30px
    top: -30px
    +respond-to-width(650)
      right: -90px
      top: -30px
    z-index: 10

.subscribe-content-wrapper
  position: relative
  +flex(center, center) /* 1 */
  +flex-direction(column)
  padding: 75px column(2)

  background:
    color: $yellow
  color: $black

  /**
    * Subscribe sentence
    *
    */
  .subscribe-sentence
    text-align: center
    font-size: 2.5rem
    font-family: 'olivierregular', serif
    line-height: 2.75rem
    margin-bottom: 35px
    color: $blue
    max-width: 800px
    .nowrap
      white-space: nowrap

    +respond-to-width($smGridBreakpoint)
      font-size: 1.8rem
      line-height: 2rem

  /**
    * Subscribe form content
    *
    */
  .subscribe-form
    width: 100%
    +flex(center, flex-start)

    > *
      margin-right: 20px
      &:last-child
        margin: 0

    +respond-to-width(900)
      +flex-direction(column)
      margin: 0

      > *
        width: 100%

  .subscribe-form-text
    +flex(center, center)
    font-size: 0.8rem
    height: 50px
    padding: 0 20px
    max-width: 300px
    border: 0
    outline: 0
    background:
      color: $lightYellow

    +respond-to-width(900)
      max-width: none
      width: 100%
      margin-bottom: 15px


  /**
    * Subscribe button
    *
    */
  .subscribe-form-button
    @extend .button-default

    font-size: 1rem
    font-weight: 900

    flex: none
    color: $darkBlueGreen
    border-color: $darkBlueGreen
    background-color: transparent

    padding: 0 25px
    height: 50px

    &:hover
      background-color: $darkBlueGreen
      color: $yellow