/* Klaro overwrites */

#klaro {
  --dark1: #fafafa;
  --dark2: #777;
  --dark3: #555;
  --light1: #444;
  --light2: #666;
  --light3: #111;

  --font-size: @font-size-base;
  --font-family: @font-family-sans-serif;
  --title-font-family: @headings-font-family;

  --green1: @brand-success;
  --green2: @brand-secondary;
  /*--green3: #01440C;*/

  --blue1: @brand-info;


  --border-radius: 5px;
  --border-style: none;
  --border-width: 0;
  /*--notice-left: $var-notice-left;*/
  /*--notice-right: $var-notice-right;*/
  /*--notice-top: $var-notice-top;*/
  /*--notice-bottom: $var-notice-bottom;*/
  --notice-max-width: 90vw;

  .cm-btn {
    padding: .5em 1em;
  }

  .cookie-modal-notice .h1 {
    color: @brand-primary;
  }

  .cookie-modal-notice,
  .cookie-modal .cm-modal.cm-klaro {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }

  .cookie-modal {
    .cm-header h1 {
      font-size: @font-size-h2;
    }

    .cm-list-description {
      font-size: @font-size-base;
    }

    .cm-list-input:checked+.cm-list-label .slider {
      background-color: @brand-secondary;
    }

    .cm-list-title {
      font-size: @font-size-h4;
      line-height: 1.5;
    }
  }
}

@media (max-width: 768px) {
  #klaro {
    .cookie-modal-notice .h1 {
      font-size: floor((@font-size-base * 2.5));
    }
  }
}

@media (min-width: 40em) {
  #klaro {
    .cookie-modal-notice {
      max-width: 600px;
      padding: 1em 2em 2em;
    }

    .cookie-modal-notice,
    .cookie-modal .cm-modal.cm-klaro {
      width: inherit;
      margin-left: auto;
      margin-right: auto;
    }
  }
}