// Cookie switch
#cookie-switch
  margin-bottom: 50px
  padding: 30px 0 50px
  border-bottom: 1px solid $grey
  width: 100%

  .placeholder
    width: 100%
    display: block

    .cookie-switch-title
      h3
        margin: 0 0 12px
        font-size: 1.2rem
        line-height: 1.2

      p
        font-size: 0.8rem
        line-height: 1.4

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

      .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
          +appearance(none)
          +cookieSprite(55px 14px, 13px, 13px)

          &:focus
            outline: none
            box-shadow: none

          &:checked
            background-position: -55px 0

        > span
          display: block
          width: calc(100% - 55px)
          font-size: 0.7rem
          line-height: 1.4

          +respond-to-width(460)
            width: calc(100% - 30px)

          strong
            font-size: 0.9rem

            span
              white-space: nowrap


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

    #save-cookie-settings
      display: inline-block
      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%)

      &.clicked
        opacity: 0.2