////////////////////////////////////////////
// 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 ol {
  align-items: baseline;
  background-image: linear-gradient(var.$bg-color-body 3px, transparent 3px, transparent 5px, var.$bg-color-body 5px); // Create background including stripe.
  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%;
}


@include mixins.mq(md, max, width) {

  .unl-hero-notch-stripe .dcf-breadcrumbs::after {
    // Create gradient to overlay breadcrumbs that overflow to the right
    background-image: linear-gradient(to right, color.adjust(var.$cream, $alpha: -1), color.adjust(var.$cream, $alpha: -0.5) 25%, var.$cream);
    content: '';
    height: calc(100% - 5px); // Subtract the combined height of the stripe and transparent space.
    position: absolute;
    right: 0;
    top: 5px; // Position so overlay isn't on top of stripe or transparent space.
    width: var.$length-vw-2;
    z-index: 1;
  }

  @media (prefers-color-scheme: dark) {

    .unl-hero-notch-stripe .dcf-breadcrumbs::after {
      background-image: linear-gradient(to right, color.adjust(var.$darkest-gray, $alpha: -1), color.adjust(var.$darkest-gray, $alpha: -0.5) 25%, var.$darkest-gray);
    }

  }

}