/**
 * Tracking Consent IFrame Overlay
 * --------------------------------------------------
 */

@use "sass:math";

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

.consent-overlay {
  display: flex;
  align-items: center;
  font-family: $font-family-sans-serif;
  font-weight: $font-weight-base;
  @include font-size($font-size-base);
  line-height: $line-height-base;
  color: $consent-fg;
  background-color: $consent-bg;
  @include padding(0 edgel-rem-px(1) edgel-rem-px(1));

  &,
  &::before,
  &::after {
    box-sizing: border-box;
  }

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

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

@media print {
  .consent-overlay {
    display: none;
  }
}

.consent-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;
}

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

  &:hover {
    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
    text-decoration: $link-hover-decoration;
  }

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

.consent-btn {
  --#{$prefix}border-width: #{$border-width};

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

  // reset user-agent styling
  margin: 0;
  font-family: inherit;
  line-height: inherit;
}

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

.consent-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
  );
}