// vf-banner

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-banner.variables.scss';

.vf-banner {
  box-sizing: border-box;
  padding: .75rem 0;

  .vf-badge {
    margin-right: 1rem;
  }

  .vf-content ~ & {
    margin-bottom: 1rem;
  }
}

// all vf-text links should be underlined in banners
.vf-banner__text .vf-banner__link,
.vf-banner [class*='vf-text'] .vf-link { // as of 1.0.4 use of vf-text is not recommended and is subject to future removal
  text-decoration: underline;
}

.vf-banner--blocking {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(var(--page-grid-gap), auto) [main-start] minmax(288px, $vf-layout--comfortable) [main-end] minmax(var(--page-grid-gap), auto);
  height: 100%;
  left: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: set-layer(vf-z-index--banner);
}

.vf-banner__content {
  align-content: center;
  align-items: center;

  box-sizing: border-box;
  margin: 0 auto;
  max-width: $vf-layout--comfortable;
  padding: 0 1rem;

  // If the vf-banner also has a vf-u-fullbleed class we remove the padding from the vf-banner__content class.
  // This makes any content in the vf-banner line up with the maximum width as defined with the vf-body class.
  .vf-u-fullbleed & {
    padding: 0;
  }

  @supports (display: grid) {
    box-sizing: unset;
    margin: unset;
    max-width: unset;
  }

  @media (max-width: 63.9375em) {
    display: block; // overrideing the .emlb-grid code
  }

  @media (min-width: $vf-breakpoint--lg) {
    grid-column: main;

  }
}

.vf-banner__text {
  @include set-type(text-body--3, $custom-margin-bottom: 0);

  flex-grow: 4;
  line-height: 1.2;
}
.vf-banner__text--lg {
  @include set-type(text-body--2, $custom-margin-bottom: 0);
}

.vf-banner--top {
  top: 0;
}

.vf-banner--bottom {
  bottom: 0;
}

.vf-banner--notice {
  background-color: $vf-notice-banner-color--background;
  border-top: 1px solid $vf-notice-banner-color--border;

  .vf-banner__text,
  .vf-text { // as of 1.0.4 use of vf-text is not recommended and is subject to future removal
    color: $vf-notice-banner-color--text;
    margin-bottom: 1.5rem;
    max-width: 64rem;

    & .vf-banner__link,
    & .vf-link {
      color: $vf-banner-color--link;
    }

    @media (min-width: $vf-breakpoint--lg) {
      margin: 0;
    }
  }

  .vf-button {
    @media (min-width: $vf-breakpoint--lg) {
      align-self: center;
      justify-self: end;
    }
  }
}

.vf-banner--blocking.vf-banner--notice {
  @include padding--block(all, $vf-notice-banner-padding);

  background-color: rgba(0, 0, 0, .1); // to do: do we do an alpha mix in?
}

.vf-banner--blocking.vf-banner--notice .vf-banner__content {
  @include padding--block(all, $vf-notice-banner-padding);

  background-color: $vf-notice-banner-color--background;
}


// CSS to target the GDPR banner when it's hidden but making vf-stack think it
// should add top margin to the next element

// This is for the WP build
.vf-banner + div {
  --vf-stack-margin--custom: space(200);
}