// Cookie message without tracking
#cookie-message
  position: fixed
  z-index: 9999
  bottom: 0
  left: 0
  padding: 15px 0
  width: 100%
  background-color: $pastelBlue
  opacity: 1
  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.1)
  transition: opacity 0.5s, transform 0.6s
  transform: translate3d(0, 0, 0)

  &.accepted
    display: none

  &.transition-out
    opacity: 0
    transform: translate3d(0, 50%, 0)

  .grid-row
    text-align: center

    p, p a, .close-button
      font-size: 0.75rem
      line-height: 1.2
      color: white

    p
      display: inline-block
      vertical-align: middle
      margin: 0

      a
        text-decoration: underline

    .close-button
      display: inline-block
      vertical-align: middle
      margin-left: 15px
      padding: 5px 12px
      background-color: rgba(white, 0.2)
      border-radius: 5px
      cursor: pointer

    +respond-to-width(625)
      p
        max-width: 225px

    +respond-to-width(375)
      p
        display: block
        max-width: none

      .close-button
        margin-top: 10px

// Cookie message with tracking
#cookie-message-overlay
  position: fixed
  z-index: 9999
  top: 0
  left: 0
  +flex(center, center)
  width: 100%
  height: 100%
  background-color: rgba(black, 0.6)
  opacity: 1
  transition: opacity 0.5s

  &.accepted
    display: none

  &.transition-out
    opacity: 0

  .placeholder
    width: calc(100vw / 14 * 12)
    padding: 60px 120px
    display: block
    max-width: 960px
    margin-left: auto
    margin-right: auto
    background-color: white

    h5
      font-size: 1.2rem
      line-height: 1
      font-weight: 500
      margin: 0 0 5px
      color: #4d4d4d

    p
      font-size: 0.8rem
      line-height: 1.2
      margin: 0
      color: #808080

    p a, p .open-menu
      color: $pastelBlue
      white-space: nowrap
      cursor: pointer
      text-decoration: underline

    .accept-cookie-button
      display: inline-block
      margin-top: 35px
      padding: 13px 20px
      border-radius: 4px
      background-color: $brightBlue
      transition: background-color 0.4s, opacity 0.4s
      font-size: 0.9rem
      line-height: 1.2
      color: white
      cursor: pointer

      &:hover
        background-color: darken($brightBlue, 8%)

    +respond-to-width(1440)
      padding: calc(100vw / 14 / 1.5) calc(100vw / 14)
      display: block

    +respond-to-width(450)
      width: 100%

  #message-description
    display: block

    &.hide
      display: none

  .cookie-types-description
    display: block
    margin: 30px 0

    .cookie-type
      +flex(space-between, flex-start)
      width: 100%

      + .cookie-type
        margin-top: 25px

      .icon
        +flex(center, center)
        width: 25px
        height: 25px

        &:before
          content: ''
          display: block

      .text
        display: block
        width: calc(100% - 55px)

        p
          max-width: 380px
          font-size: 0.7rem
          line-height: 1rem
          margin: 0
          color: rgba($grey, 0.6)

          strong
            display: inline-block
            color: $grey
            font-size: 0.9rem

            span
              white-space: nowrap

      &.tracking
        .icon:before
          +cookieSprite(0 0, 25px, 25px)

      &.analytic
        .icon:before
          +cookieSprite(27px 0, 25px, 25px)

  .cookie-settings
    display: none

    &.edit
      display: block

    .wrapper
      padding: 30px 0 0

    .cookie-type
      +flex(space-between, flex-start)
      width: 100%
      max-width: 420px
      cursor: pointer

      + .cookie-type
        margin-top: 25px

      input
        margin: 4px 0 0
        display: block
        +cookieSprite(55px 14px, 13px, 13px)
        +appearance(none)

        &:checked
          background-position: -55px 0

        &:focus
          outline: none
          box-shadow: none

      > span
        display: block
        width: calc(100% - 55px)
        font-size: 0.7rem
        line-height: 1rem
        color: rgba($grey, 0.6)

        strong
          font-size: 0.9rem
          color: $grey

          span
            white-space: nowrap

      &.analytic
        pointer-events: none
        cursor: not-allowed

        input
          opacity: 0.3