/* Below are styles which are common across different domains */
:root {
  /* Color variables */
  --prebanner-opt-out-button-color: #191919;

  /* Pre Banner Variables */
  --prebanner-background-color: white; /* Pre banner background colour */
  --prebanner-border-color: white; /* Pre banner border colour */
  --prebanner-text-color: #494949; /* Pre banner text colour */

  --reject-all-button-background-color: white; /* Reject all button colour */
  --reject-all-button-text-color: #191919; /* Reject all button text colour */
}

/* TODO: The font file is not loading properly */
.cassie-cookie-module {
  font-family: DD-TTNorms, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

/* Styles all buttons within the cookie widget */
.cassie-cookie-module button {
  font-family: DD-TTNorms, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

.cassie-cookie-module > .cassie-overlay {
  z-index: 9999;
}

/* Remove the default border right and left */
.cassie-cookie-module > .cassie-pre-banner {
  border: none;
}

/* Description text */
.cassie-pre-banner > .cassie-pre-banner--text {
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  padding: 12px 24px;
  margin-top: 0;
  margin-bottom: 0;
}

/* Cookie Policy link - customize with domain brandning color */
.cassie-pre-banner > .cassie-pre-banner--text > a {
  color: var(--accept-all-button-border-color);
  font-weight: 400;
}

/* Update Got it ("Accept All") button style */
.cassie-pre-banner .cassie-accept-all {
  border-radius: 1000px;
  font-size: 18px;
  line-height: 22px;
}

/* Update Opt Out (Reject non-essential) button style */
.cassie-pre-banner .cassie-reject-all {
  background-color: white;
  color: var(--prebanner-opt-out-button-color);
  font-size: 14px;
  margin-top: 0px;
}

/* Action Buttons */
.cassie-pre-banner--button--container .cassie-pre-banner--button {
  font-weight: bold;
  padding: 12px 0;
}

@media only screen and (min-width: 1200px) {
  /* Handle the banner width at large screen size */
  .cassie-cookie-module > .cassie-pre-banner {
    width: 60%;
    max-width: 850px;
    margin: 10px auto;
  }
}