$cookieDialogHeight : 60px
$cookieLargeDialogHeight : 120px

/* HTML and navigation
 ========================================================================== */

html.has-cookie-dialog
  padding-top: $cookieDialogHeight

  nav.main,
  .navigation-drip
    top: $cookieDialogHeight

  +respond-to-width($mdGridBreakpoint)
    padding-top: $cookieLargeDialogHeight

    nav.main,
    .navigation-drip
      top: $cookieLargeDialogHeight

/* Dialog
 ========================================================================== */

.cookie-consent
  +position(fixed,0 null null 0)
  z-index: 10000
  display: flex
  justify-content: center
  align-items: center

  height: $cookieDialogHeight
  width: 100%
  border-bottom: 1px solid #eaeaea
  background: #fff
  color: $black
  font-size: 16px

  .message
    display: block
    padding: 0 20px
    max-width: 75%

    a
      display: inline-block
      color: $blue
      text-decoration: none
      &:hover
        text-decoration: underline

  .button
    margin-left: 40px
    width: auto
    min-width: 0
    height: 40px
    line-height: 36px
    font-size: 16px

  // Set flex direct to column and put everything below each other
  +respond-to-width($mdGridBreakpoint)
    flex-direction: column
    text-align: center
    height: $cookieLargeDialogHeight

    .message
      max-width: none
    .button
      margin-left: 0
      margin-top: 10px
      +position(relative, 0 0 null null)