// carry over revoke styling from https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css
// other styling are interfering so removed
.cc-animate.cc-revoke {
  -webkit-transition: transform 1s ease;
  -webkit-transition: -webkit-transform 1s ease;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease
}

.cc-animate.cc-revoke.cc-top {
  -webkit-transform: translateY(-2em);
  transform: translateY(-2em)
}

.cc-animate.cc-revoke.cc-bottom {
  -webkit-transform: translateY(2em);
  transform: translateY(2em)
}

.cc-animate.cc-revoke.cc-active.cc-top {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.cc-animate.cc-revoke.cc-active.cc-bottom {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.cc-revoke:hover {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.cc-revoke {
  position: fixed;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Helvetica, Calibri, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  z-index: 9999
}

.cc-revoke {
  padding: .5em
}

.cc-revoke:hover {
  text-decoration: underline
}

.cc-btn, .cc-close, .cc-link, .cc-revoke {
  cursor: pointer
}

.cc-revoke.cc-top {
  top: 0;
  left: 3em;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em
}

.cc-revoke.cc-bottom {
  bottom: 0;
  left: 3em;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em
}

.cc-revoke.cc-left {
  left: 3em;
  right: unset
}

.cc-revoke.cc-right {
  right: 3em;
  left: unset
}

@media print {
  .cc-revoke, .cc-window {
    display: none
  }
}

#cookie-bar {
  .cc-window {
    height: 150px;
    width: 100%;
    padding: $base-spacing-3x;
    font-family: $base-font-family;
    font-size: $base-font-size * 1.1875; // 19px
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.25;
    color: $base-white;
    transition: bottom ease 0.3s, opacity ease 1s; // need to have opacity transition due to style display none being added after cc-invisible class transition ends
    position: fixed;
    bottom: 0;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    z-index: 9999;

    &.cc-invisible {
      opacity: 0;
    }
  }

  .cc-icon {
    margin-right: $base-spacing-3-4th; // 12px
    margin-top: -10px;
  }

  .cc-message {
    margin-right: 0;

    a {
      text-decoration: underline;
      color: $sky-blue-500;
      font-weight: 500;
    }

    p {
      font-size: $base-font-size * 1.1875; // 19px
      margin-bottom: 0;
      display: inline; // changed to inline due to tinyMCE adding additional p tag at the end (content is pushed upward)
    }
  }

  .cc-compliance {
    display: flex;
  }

  .cc-dismiss,
  .cc-allow {
    margin-left: $base-spacing;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
  }

  .cc-dismiss {
    border-color: transparent;
    background: transparent;
    color: $base-white;
  }

  .cc-allow {
    border-color: $base-white;
    background: transparent;
    color: $base-white;
  }

  @media only screen and (max-width: 414px) {
    .cc-allow,
    .cc-dismiss {
      width: 100%;
      margin-left: 0;
    }
  }

  @media only screen and (max-width: 736px) {
    .cc-window {
      min-height: 150px;
      height: unset;
      flex-direction: column;
      align-items: flex-start;
      padding: $base-spacing-1-half;
    }

    .cc-icon {
      margin-top: unset;
      margin-bottom: $base-spacing-3-4th;
    }

    .cc-message {
      margin-bottom: $base-spacing;
    }

    .cc-compliance {
      display: flex;
      flex-direction: column-reverse;
      width: 100%;

      .cc-allow {
        margin-bottom: $base-spacing;
      }
    }
  }

  @media only screen and (min-width: 737px) and (max-width: 1467px) {
    .cc-window {
      min-height: 150px;
      height: unset;
      align-items: flex-start;
    }

    .cc-icon {
      margin-top: unset;
    }
  }

  #cc-short-policy {
    position: fixed;
    height: auto;
    left: 0;
    right: 0;
    bottom: -100%;
    padding: $base-spacing-3x;
    background-color: $jaguar-700;
    font-size: $base-font-size * 1.1875; // 19px
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.25;
    color: $base-white;
    transition: bottom ease 0.3s;

    a {
      text-decoration: underline;
      color: $sky-blue-500;
      font-weight: 500;
    }

    p {
      font-size: $base-font-size * 1.1875; // 19px
      margin-bottom: 0;
      display: inline; // changed to inline due to tinyMCE adding additional p tag at the end (content is pushed upward)
    }

    &.show {
      bottom: 0 !important;
    }
  }
}

@media only screen and (max-width: 576px) {
  #cookie-bar {
    max-height: 75vh;
    position: fixed;
    overflow-y: auto;
    left: 0;
    right: 0;
    bottom: 0;

    .cc-window {
      position: relative;
      display: inline-flex;
      height: unset;
    }

    #cc-short-policy {
      padding: $base-spacing-1-half;
      position: relative;
      display: none;

      &.show {
        display: inline-block;
        flex-wrap: wrap;
      }
    }
  }
}