////////////////////////////////////////////////////////////////////////////////
// *
// * Header: sticky
// *
////////////////////////////////////////////////////////////////////////////////

/// Import the variables and mixins we need
@use "../../00-theme/00-base/00-config/00-variables" as *;
@use "../../00-theme/00-base/01-helpers" as *;

// *
// =============================================================================

// only on bp-sm
// works with the JS library: header-sticky
// and theme setting in /admin/appearance/settings/my_theme

.sticky-spacer {
  display: none;
}

@include bp-sm {
  .sticky-spacer {
    display: block;
    height: 0;
  }

  .wrapper--page-top {
    position: relative;
    top: 0;

    &.is-fixed {
      @include z-index(header-fixed);
      position: fixed;
      left: 0;
      width: 100%;
      background-color: hsl(var(--clr-white));
      box-shadow: none;
      transition-property: background-color, box-shadow, margin-top;
      transition-duration: $duration;
      transition-timing-function: $easing;
    }
  }

  // the elements which will need a transition effect
  // list them here
  .header-top,
  .header__block,
  .header--primary,
  .header--primary > .container,
  .nav--region-nav-primary,
  .nav--region-nav-secondary,
  .header__section--primary,
  .header__section--secondary,
  .wrapper--navigation__content,
  .nav-section-primary,
  .nav-section-secondary,
  .block__branding--header,
  .block__branding__image--header {
    transition-property: left, top, right, bottom, margin, padding, width, max-width, height;
    transition-duration: $duration;
    transition-timing-function: $easing;
  }

  // make more compact when scrolling
  .js-scrolling {
    .wrapper--page-top.is-fixed {
      box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
    }

    // -- Add easing when we're further down to page, to prevent jump.
    .sticky-top {
      &.is-fixed.not-top {
        transition: margin-top .35s ease;
      }
    }
  }
}
