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

@use "sass:math";

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

@mixin reset-button {
  // Lifted from the Bootstrap _reboot partial.

  // Explicitly remove focus outline in Chromium when it shouldn't be
  // visible (e.g. as result of mouse click or touch tap). It already
  // should be doing this automatically, but seems to currently be
  // confused and applies its very visible two-tone outline anyway.
  button:focus:not(:focus-visible) {
    outline: 0;
  }

  input,
  button {
    font-family: inherit;
    @include font-size(inherit);
    line-height: inherit;
  }

  // Remove the inheritance of text transform in Firefox
  button,
  select {
    text-transform: none;
  }

  // Set the cursor for non-`<button>` buttons
  //
  // Details at https://github.com/twbs/bootstrap/pull/30562
  [role="button"] {
    cursor: pointer;
  }
}

.cookie-overlay,
.cookie-jar {
  @include reset-button();
  @include reset-text();
  line-height: $line-height-base;

  p {
    margin-top: 0;
    margin-bottom: $paragraph-margin-bottom;
  }
}

.cookie-backdrop {
  @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
}

.cookie-jar {
  --#{$prefix}cookie-banner-padding: #{$modal-inner-padding};
  --#{$prefix}cookie-banner-margin: #{$modal-dialog-margin};
  --#{$prefix}cookie-banner-box-shadow: #{$modal-content-box-shadow-xs};

  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.cookie-container {
  position: relative;
  width: auto;
  margin: var(--#{$prefix}cookie-banner-margin);
  // allow clicks to pass through for custom click handling to close modal
  pointer-events: none;

  // When fading in the modal, animate it to slide down
  .cookie-jar & {
    @include transition($modal-transition);
    transform: $modal-fade-transform;
  }
  .cookie-jar.show & {
    transform: $modal-show-transform;
  }

  // When trying to close, animate focus to scale
  .cookie-jar.modal-static & {
    transform: $modal-scale-transform;
  }
}

.cookie-content {
  position: relative;
  width: 100%; // Ensure `.cookie-content` extends the full width of the parent `.cookie-container`
  padding: $modal-inner-padding var(--#{$prefix}cookie-banner-padding);
  // counteract the pointer-events: none; in the .cookie-container
  pointer-events: auto;
  background-clip: padding-box;
  border: 1px solid transparent;
  @include box-shadow(var(--#{$prefix}cookie-banner-box-shadow));
  // Remove focus outline from opened modal
  outline: 0;
}

.cookie-overlay,
.cookie-container {
  color: $cookie-fg;
  background-color: $cookie-bg;
}

.cookie-overlay {
  display: flex;
  align-items: center;
  @include padding(0 edgel-rem-px(1) edgel-rem-px(1));
}

.cookie-heading {
  margin: 1rem 0 .5rem; // includes user-agent reset
  @include font-size($font-size-base * 1.35);
  font-weight: 300;
  color: $cookie-fg;
}

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

.cookie-link:active,
.cookie-link:focus-visible,
.cookie-link:hover {
  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-bottom: space(2);
  @include border-radius($border-radius-lg);

  &: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 minus check height
  // Other margins set to 0 from _reboot: for user-agent resets
  margin: (($line-height-base - $form-check-input-width) * .5) 0 0 0;
  vertical-align: top;
  appearance: none;
  background-color: $form-check-input-bg;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: $form-check-input-border;
  print-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: $cookie-input-active-bg;
    outline: 0;
    box-shadow: $cookie-focus-box-shadow;

  }

  &:checked {
    background-color: $cookie-input-active-bg;
    border-color: $cookie-input-active-bg;

    &[type="checkbox"] {
      @if $enable-gradients {
        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$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(--#{$prefix}gradient);
      } @else {
        background-image: escape-svg($form-check-radio-checked-bg-image);
      }
    }
  }

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

    @if $enable-gradients {
      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$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-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 {
  margin: 0; // reset user-agent styling
  @include button-size(
    $btn-padding-y,
    $btn-padding-x,
    $btn-font-size,
    $border-radius
  );
  --#{$prefix}border-width: #{$border-width};
}

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

.cookie-btn-primary {
  @include edgel-custom-button(
    $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 edgel-custom-button(
    $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,
    $border-radius-sm
  );
}

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

@include media-breakpoint-up(sm) {
  .cookie-jar {
    --#{$prefix}cookie-banner-padding: #{$modal-inner-padding * 2};
    --#{$prefix}cookie-banner-margin: #{$modal-dialog-margin-y-sm-up};
    --#{$prefix}cookie-banner-box-shadow: #{$modal-content-box-shadow-sm-up};
    --#{$prefix}cookie-banner-width: #{$modal-md};
  }

  // Automatically set modal's width for larger viewports
  .cookie-container {
    max-width: var(--#{$prefix}cookie-banner-width);
    margin-right: auto;
    margin-left: auto;
  }
}

@include media-breakpoint-up(md) {
  .cookie-overlay {
    @include padding(0 edgel-rem-px(2) edgel-rem-px(1));
  }
}

@include media-breakpoint-up(lg) {
  .cookie-jar {
    --#{$prefix}cookie-banner-width: #{$modal-lg};
  }
}
