$page_background: $bg_white;
$background: #fcf4e6;
$text: $color-text;

$link: #df2b0a;
$link_hover: #df2b0a;
$max-width: 1290px;
$border: #ddd;
$progress_color: $color-accent;

.cookienote_banner {
  display: none;
  background-color: $background;
  color: $text;
  bottom: 0;
  font-size: 14px;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 100000000;
  padding: 20px;
  line-height: 1.2em;
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);

  .width_wrapper {
    max-width: 700px;
  }
}

.cookienote_confirm {
  @extend %button;
  float: left;
  margin-right: 10px;
}

.cookienote_deny {
  @extend %button;
}

.cookienote_text {
  display: inline;
  vertical-align: middle;
}

.cookienote_settings {
  display: inline-block;
  margin-left: 2em;
}

@media screen {
  .cookienote_banner {
    display: block;
  }
}

// Cookienote-Settings

@media screen and (min-width: 650px) {
  .cookienote_settings {
    .cols_container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;

      > div {
        width: 45%;
      }
    }
  }
}

.cookienote_settings {
  .cols_container {
    margin-top: 30px;

    .settings {
      position: relative;
      margin-bottom: 40px;

      input {
        position: absolute;
        left: -9999em;
      }

      #cn_progress {
        width: 6px;
        border: 1px solid $border;
        border-radius: 2px;
        position: absolute;
        left: 7px;
        margin-top: 15px;
        background: $page_background;
        z-index: 2;
        pointer-events: none;
        box-shadow: 0 0 0 2px $page_background;

        div {
          background: $progress_color;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 0;
          transition: height .3s;
        }
      }
    }

    input + label {
      &:before {
        content: "";
        position: relative;
        display: inline-block;
        vertical-align: middle;
        border-top: 1px solid $border;
        width: 20px;
        height: 1px;
        z-index: 1;
        margin-right: 15px;
      }
    }

    #cn_progress_bubble {
      background: $progress_color;
      height: 20px;
      width: 20px;
      border-radius: 20px;
      z-index: 3;
      position: absolute;
      top: 0;
      left: 0;
      margin-top: 3px;
      transition: top .3s;
    }

    p {
      padding-left: 35px;
    }

    button {
      margin-left: 35px;
    }
  }
}

// Individuelle Freischaltung
.ia_placeholder {
  .placeholder_text,
  .placeholder_text_deactivate {
    display: block;
    clear: both;

    input {
      position: absolute;
      left: -9999em;

      + label {
        padding-left: 35px;
        position: relative;
        display: block;
        line-height: 18px;

        &:before,
        &:after {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          height: 18px;
          width: 18px;
          border: 1px solid $border;
          cursor: pointer;
        }

        &:after {
          line-height: 18px;
          font-size: 16px;
          text-align: center;
        }
      }
    }
  }

  .placeholder_text_deactivate input + label {
    &:after {
      content: "✓";
      font-weight: bold;
    }
  }

  .placeholder_text,
  .placeholder_text_deactivate {
    padding: 10px 20px;
    background: $background;

    strong {
      display: block;
      margin-bottom: 3px;
    }
  }
}