////////////////////////////////////////////
// THEME / COMPONENTS / HEROES: NOTCH STRIPE
////////////////////////////////////////////


@use "sass:color";
@use "../variables/" as var;
@use "../mixins/" as mixins;


// Notch Stripe
.unl-hero-notch-stripe .dcf-hero-group-1,
.unl-hero-notch-stripe .dcf-hero-group-2 {
  position: relative;
}


.unl-hero-notch-stripe .dcf-hero-group-1 {
  min-width: 0;
  margin-top: -#{var.$ms07}em; // This should equal the height of the breadcrumbs wrapper.
  order: 2;
  width: 100%;
  z-index: 1; // Make hero-group-1 appear in front of hero-group-2.
}


.unl-hero-notch-stripe .dcf-breadcrumbs-wrapper {
  height: #{var.$ms07}em; // This should equal the negative margin-top of hero-group-1.
}


.unl-hero-notch-stripe .dcf-breadcrumbs-wrapper,
.unl-hero-notch-stripe .dcf-breadcrumbs {
  display: flex;
  flex-flow: row nowrap;
  min-width: 0;
  position: relative; // For absolutely-positioned pseudo content
}


.unl-hero-notch-stripe .dcf-breadcrumbs-wrapper::after {
  background: linear-gradient(var.$bg-color-body 3px, transparent 3px) 0 0 / 2px 100% no-repeat,
              linear-gradient(to top, transparent 2px, var.$bg-color-body 2px) 2px 0 / 3px 100% no-repeat,
              linear-gradient(to top, transparent 2px, var.$bg-color-body 2px, var.$bg-color-body 5px, transparent 5px) 2px 0 / 100% 100% no-repeat;
  content: '';
  flex-grow: 1; // Grow if there aren't enough breadcrumbs to overflow.
  min-width: var.$length-vw-2; // Force a minimum width equal to dcf-wrapper padding-right if there are enough breadcrumbs to overflow.
}


.unl-hero-notch-stripe .dcf-breadcrumbs {
  background-image: linear-gradient(var.$bg-color-body 3px, transparent 3px, transparent 5px, var.$bg-color-body 5px); // Create background including stripe.
}


.unl-hero-notch-stripe .dcf-breadcrumbs ol {
  align-items: baseline;
  margin-bottom: 0;
  min-width: 0; // Let breadcrumbs shrink if needed.
  @include mixins.pt-7;
}


.unl-hero-notch-stripe .dcf-page-title {
  @include mixins.bg-cream;
  padding-left: var.$length-vw-2; // Add padding to equal the wrapper object's left padding.
  padding-right: var.$length-vw-2; // Add padding to equal the wrapper object's right padding.
  @include mixins.pt-7;
}


.unl-hero-notch-stripe .dcf-hero-group-2::after {
  // Create gradient scrim
  background-image: linear-gradient(
    color.adjust(var.$darkest-gray, $alpha: -1),
    color.adjust(var.$darkest-gray, $alpha: -0.93) 70%,
    color.adjust(var.$darkest-gray, $alpha: -0.85)
  );
  bottom: 0;
  content: '';
  height: #{var.$ms16}em; // Scrim should be no taller than the minimum height of the 'sm' hero to avoid overlapping the navigation.
  position: absolute;
  width: 100%;
}