theme-sticky-header {
  --theme-sticky-header-top: 0;

  position: relative;
  inset-block-start: 0;
  z-index: calc(var(--z-index-sticky) - 1);
  display: block;
}

theme-sticky-header.theme-sticky-header--sticky {
  /* Keep container in flow as placeholder */
}

theme-sticky-header.theme-sticky-header--sticky > .header-section {
  position: fixed;
  inset-block-start: var(--theme-sticky-header-top);
  left: 0;
  width: 100%;
  z-index: var(--z-index-sticky);
  animation: animation-header-sticky 0.26s ease-out forwards;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

theme-sticky-header.theme-sticky-header--sticky-collapse > .header-section {
  animation-name: animation-header-sticky-collapse;
}

@keyframes animation-header-sticky {
  0% {
    transform: translateY(calc(-100% + var(--theme-sticky-header-top) * -1));
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes animation-header-sticky-collapse {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(calc(-100% + var(--theme-sticky-header-top) * -1));
  }
}