/**
 * Cookie Banner
 * --------------------------------------------------
 */

@use "../settings" as *;
@use "../tools" as *;

.cookie-overlay,
.cookie-jar {
  @include padding(edgel-rem-px(1) 0);
  font-family: "Source Sans Pro", sans-serif;
  @include font-size($font-size-base);
  color: $cookie-fg;
  background-color: $cookie-bg;
}

.cookie-overlay {
  display: flex;
  align-items: center;
  min-width: 480px;
  min-height: 270px;
}
@include media-breakpoint-up(md) {
  .cookie-overlay {
    min-width: 592px;
    min-height: 333px;
  }
}
@include media-breakpoint-only(xs) {
  .cookie-overlay .embed-responsive-item {
    min-width: auto;
    min-height: auto;
  }
}

/* Added to stop IE11 collapse/blow-out on flex columns */
.cookie-overlay .cookie-container {
  width: 100%;
}

.cookie-heading {
  margin-top: 0;
  @include font-size($font-size-base * 1.35);
  font-weight: 300;
  color: $cookie-fg;
}

.cookie-link{
  color: $cookie-link;
  text-decoration: none;
}

.cookie-link:active,
.cookie-link:focus,
.cookie-link:hover,
.cookie-link:visited {
  color: $cookie-link;
  text-decoration: underline;
}

/* Cookie checks and radios copied from bootstrap _form-check.scss */
.cookie-check {
  display: block;
  min-height: $form-check-min-height;
  // Variation from Bootstrap
  padding: space(1) space(3) space(1) ($form-check-padding-start + 1em);
  margin-right: space(4);
  margin-bottom: space(2);
  @include border-radius($border-radius-lg);

  &:last-child {
    margin-right: 0;
  }
  &:hover,
  &:focus {
    background-color: $cookie-btn2-bg-hover;
  }
  &:active {
    background-color: $cookie-btn2-bg-active;
  }
  // End of variation from Bootstrap

  .cookie-check-input {
    float: left;
    margin-left: $form-check-padding-start * -1;
  }
}

.cookie-check-input {
  width: $form-check-input-width;
  height: $form-check-input-width;
  margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
  vertical-align: top;
  background-color: $form-check-input-bg;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: $form-check-input-border;
  appearance: none;
  color-adjust: exact; // Keep themed appearance for print
  @include transition($form-check-transition);

  &[type="checkbox"] {
    @include border-radius($form-check-input-border-radius);
  }

  &[type="radio"] {
    // stylelint-disable-next-line property-disallowed-list
    border-radius: $form-check-radio-border-radius;
  }

  &:active {
    filter: $form-check-input-active-filter;
  }

  &:focus {
    border-color: $form-check-input-focus-border;
    outline: 0;
    box-shadow: $form-check-input-focus-box-shadow;
  }

  &:checked {
    background-color: $form-check-input-checked-bg-color;
    border-color: $form-check-input-checked-border-color;

    &[type="checkbox"] {
      @if $enable-gradients {
        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
      } @else {
        background-image: escape-svg($form-check-input-checked-bg-image);
      }
    }

    &[type="radio"] {
      @if $enable-gradients {
        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
      } @else {
        background-image: escape-svg($form-check-radio-checked-bg-image);
      }
    }
  }

  &[type="checkbox"]:indeterminate {
    background-color: $form-check-input-indeterminate-bg-color;
    border-color: $form-check-input-indeterminate-border-color;

    @if $enable-gradients {
      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
    } @else {
      background-image: escape-svg($form-check-input-indeterminate-bg-image);
    }
  }

  &:disabled {
    pointer-events: none;
    filter: none;
    opacity: $form-check-input-disabled-opacity;
  }

  // Use disabled attribute in addition of :disabled pseudo-class
  // See: https://github.com/twbs/bootstrap/issues/28247
  &[disabled],
  &:disabled {
    ~ .cookie-check-label {
      opacity: $form-check-label-disabled-opacity;
    }
  }
}

.cookie-check-label {
  font-weight: 700;
  color: $form-check-label-color;
  cursor: $form-check-label-cursor;
}

// End of bootstrap check copy

.cookie-check-inline {
  display: inline-block;
  margin-right: $form-check-inline-margin-end;
}

.cookie-actions {
  @include margin-top(edgel-rem-px(.6));
  margin-bottom: 0;
  @include list-unstyled();
}

.cookie-actions-item {
  display: inline-block;
  @include margin-top(edgel-rem-px(.4));

  &:not(:last-child) {
    margin-right: $list-inline-padding;
  }
}

.cookie-btn-overlay {
  @include margin-top(edgel-rem-px(1));
}

.cookie-lid {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  @include padding(edgel-rem-px(.5));
  text-align: left;
  background-color: $cookie-bg;
}

.cookie-collapse {
  &:not(.show) {
    display: none;
  }
}

.cookie-collapsing {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  @include transition($cookie-jar-transition);
}


@media print {
  .cookie-overlay,
  .cookie-jar.show,
  .cookie-lid.show {
    display: none;
  }
}

.cookie-btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  line-height: $btn-line-height;
  color: $cookie-fg;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: nowrap;
  vertical-align: middle;
  cursor: if($enable-button-pointers, pointer, null);
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size, $btn-border-radius-lg);
  @include transition($btn-transition);

  &:hover {
    color: $cookie-fg;
    text-decoration: $link-hover-decoration;
  }

  &:focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  &:active,
  &.active {
    @include box-shadow($btn-active-box-shadow);

    &:focus {
      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
    }
  }

  &:disabled,
  &.disabled {
    pointer-events: none;
    opacity: $btn-disabled-opacity;
    @include box-shadow(none);
  }
}

.cookie-btn-primary {
  @include button-variant(
    $cookie-btn1-bg,
    $cookie-btn1-bd,
    $cookie-btn1-fg,
    $cookie-btn1-bg-hover,
    $cookie-btn1-bd-hover,
    $cookie-btn1-fg-hover,
    $cookie-btn1-bg-active,
    $cookie-btn1-bd-active
  );
}

.cookie-btn-secondary {
  @include button-variant(
    $cookie-btn2-bg,
    $cookie-btn2-bd,
    $cookie-btn2-fg,
    $cookie-btn2-bg-hover,
    $cookie-btn2-bd-hover,
    $cookie-btn2-fg-hover,
    $cookie-btn2-bg-active,
    $cookie-btn2-bd-active
  );
}

.cookie-btn-lid {
  @include button-size(
    $btn-padding-y-sm,
    $btn-padding-x-sm,
    $btn-font-size-sm,
    $btn-border-radius-sm
  );
}

body {
  padding-bottom: edgel-rem-px(3);
}

.cookie-container {
  @include edgel-container();
}

.cookie-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: floor(($grid-gutter-width / -2));
  margin-left: floor(($grid-gutter-width / -2));
}
.cookie-col-double,
.cookie-col-single {
  position: relative;
  width: 100%;

  /* Prevent columns from collapsing when empty */
  min-height: 1px;
  padding-right: floor(($grid-gutter-width / 2));
  padding-left: floor(($grid-gutter-width / 2));
}
@include media-breakpoint-up(lg) {
  .cookie-col-double {
    flex: 2 1 0;

    /* Add a `max-width` to ensure content within each column does not blow out
     * the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     * do not appear to require this. */
    max-width: 100%;
  }
  .cookie-col-single {
    flex: 1 1 0;
    max-width: 100%;
  }
}
