/**
 * 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.35);
  font-weight: 300;
  line-height: 1.2;
  color: $consent-fg;
}

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

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

.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;
  font-size: 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
  );
}

