/**
 * Tracking Consent Overlay
 * --------------------------------------------------
 * This is not included in the EdGEL CSS.  It is only used in the <uoe-consent> custom element.
 */

@use "sass:math";

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

@import "bootstrap/scss/vendor/rfs";

// Lifted from the Bootstrap _reboot partial.
*,
*::before,
*::after {
  box-sizing: border-box;
}

:host {
  --#{$prefix}border-width: #{$border-width};
  --#{$prefix}border-color: #{$border-color};
  display: block;
  padding-bottom: edgel-rem-px(3);
  font-family: $font-family-sans-serif;
  font-weight: $font-weight-base;
  @include font-size($font-size-base);
  line-height: $line-height-base;

  @if $enable-smooth-scroll {
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
}

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

.uoe-jar {
  --#{$prefix}consent-banner-padding: #{$modal-inner-padding} #{$modal-inner-padding};
  --#{$prefix}consent-banner-margin: #{$modal-dialog-margin};
  --#{$prefix}consent-banner-box-shadow: #{$box-shadow-sm};

  @include edgel-reset-button();
  @include reset-text();

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

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

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

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

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

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

.uoe-list {
  padding-left: 1.5em;
}

/* consent checks and radios copied from bootstrap _form-check.scss */
.uoe-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-visible {
    background-color: $consent-btn2-bg-hover;
    outline: 0;
  }
  &:active {
    background-color: $consent-btn2-bg-active;
  }
  // End of variation from Bootstrap

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

.uoe-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;
  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-visible {
    border-color: $consent-input-active-bg;
    outline: 0;
    box-shadow: $consent-focus-box-shadow;
  }

  &:checked {
    background-color: $consent-input-active-bg;
    border-color: $consent-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: $consent-input-active-bg;
    border-color: $consent-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 {
    ~ .uoe-check-label {
      opacity: $form-check-label-disabled-opacity;
    }
  }
}

.uoe-check-label {
  // Variation from Bootstrap
  display: block;
  padding: space(1) space(3) space(1) ($form-check-padding-start + 1.25em);
  margin: -#{space(1)} -#{space(3)} -#{space(1)} -#{$form-check-padding-start + 1em};
  @include border-radius($border-radius-lg);
  font-weight: $form-label-font-weight;

  &:hover,
  &:focus-visible {
    background-color: $consent-btn2-bg-hover;
  }
  &:active {
    background-color: $consent-btn2-bg-active;
  }
  // End of variation from Bootstrap

  color: $form-check-label-color;
  cursor: $form-check-label-cursor;
}

// End of bootstrap check copy

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

.uoe-actions {
  text-align: center;
  --#{$prefix}consent-btn-width: 80%;
  --#{$prefix}consent-btn-margin: #{space(1)} 0;
}

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

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

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

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

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

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

  .uoe-actions {
    --#{$prefix}consent-btn-width: 25%;
    --#{$prefix}consent-btn-margin: 1rem 2rem;
  }
}

.uoe-btn-lid {
  margin: 0; // reset user-agent styling
  @include button-size(
    $btn-padding-y-sm,
    $btn-padding-x-sm,
    $btn-font-size-sm,
    $border-radius-sm
  );
}

.uoe-btn {
  @include button-size(
    $btn-padding-y,
    $btn-padding-x,
    $btn-font-size,
    $border-radius
  );

  width: var(--#{$prefix}consent-btn-width, auto);
  margin: var(--#{$prefix}consent-btn-margin, 0);
}

.uoe-btn-primary {
  @include edgel-custom-button(
    $consent-btn1-bg,
    $consent-btn1-bd,
    $consent-btn1-fg,
    $consent-btn1-bg-hover,
    $consent-btn1-bd-hover,
    $consent-btn1-fg-hover,
    $consent-btn1-bg-active,
    $consent-btn1-bd-active
  );
}

.uoe-btn-secondary {
  @include edgel-custom-button(
    $consent-btn2-bg,
    $consent-btn2-bd,
    $consent-btn2-fg,
    $consent-btn2-bg-hover,
    $consent-btn2-bd-hover,
    $consent-btn2-fg-hover,
    $consent-btn2-bg-active,
    $consent-btn2-bd-active
  );
}

.uoe-heading {
  margin: 1rem 0 .5rem; // includes user-agent reset
  @include font-size($font-size-base * 1.6);
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $consent-fg;
}

.uoe-link {
  --#{$prefix}link-color-rgb: #{to-rgb($consent-fg)};
  --#{$prefix}link-hover-color-rgb: #{to-rgb($consent-link)};
  --#{$prefix}link-font-weight: #{$link-font-weight};
  --#{$prefix}link-decoration-opacity: #{$link-decoration-opacity};

  @include edgel-base-link-decoration();
  @include edgel-link-states();
}

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

.uoe-bottom {
  --#{$prefix}consent-banner-padding: 0 #{space(3)};
  --#{$prefix}consent-banner-margin: 0;
  --#{$prefix}consent-banner-width: auto;
  --#{$prefix}consent-banner-box-shadow: none;

  position: sticky;
  top: 100vh;
  padding: 0;
  background-color: $consent-bg;

  @include media-breakpoint-up(md) {
    --#{$prefix}consent-banner-padding: 0 #{space(5)};
  }

  @include media-breakpoint-up(lg) {
    // stylelint-disable-next-line function-disallowed-list
    padding: 0 calc(50vw - #{($font-size-base * 55) * .5});
  }
}