:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
  * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial
  * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial
  * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to `var(--nano-z-index-menubar)`;
  * @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);
  * @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);
  */
  --stuck-left: initial;
  --stuck-right: initial;
  --stuck-z-index: var(--nano-z-index-menubar);
  --top-hide: translateY(-110%);
  --bottom-hide: translateY(110%);
  display: block;
  max-inline-size: 100%;
}

:host([sticky]) {
  position: sticky;
  transition: 0.3s ease transform;
  will-change: min-block-size;
}

:host([sticky][stuck]) {
  inset-inline: var(--stuck-left) var(--stuck-right);
  z-index: var(--stuck-z-index) !important;
}

:host([sticky][hide][placed-top]) {
  transform: var(--top-hide);
}

:host([sticky][hide][placed-bottom]) {
  transform: var(--bottom-hide);
}

:host([sticky][index="1"]) {
  z-index: calc(var(--stuck-z-index) + 1);
}

:host([sticky][index="2"]) {
  z-index: calc(var(--stuck-z-index) + 2);
}

:host([sticky][index="3"]) {
  z-index: calc(var(--stuck-z-index) + 3);
}

:host([sticky][index="4"]) {
  z-index: calc(var(--stuck-z-index) + 4);
}

:host([sticky][index="5"]) {
  z-index: calc(var(--stuck-z-index) + 5);
}

.sticker {
  display: inherit;
  max-inline-size: inherit;
  inline-size: 100%;
}
.sticker:not(.stuck) {
  inline-size: auto !important;
}
.sticker.sticky {
  transition: 0.3s ease all;
  position: relative;
}
:host([index="1"]) .sticker.sticky {
  z-index: calc(var(--stuck-z-index) + 1);
}
:host([index="2"]) .sticker.sticky {
  z-index: calc(var(--stuck-z-index) + 2);
}
:host([index="3"]) .sticker.sticky {
  z-index: calc(var(--stuck-z-index) + 3);
}
:host([index="4"]) .sticker.sticky {
  z-index: calc(var(--stuck-z-index) + 4);
}
:host([index="5"]) .sticker.sticky {
  z-index: calc(var(--stuck-z-index) + 5);
}
.sticker.stuck {
  position: fixed;
  inset-inline: var(--stuck-left) var(--stuck-right);
  z-index: var(--stuck-z-index);
  transform: translateY(0);
}
:host([placed-top]) .sticker.stuck {
  inset-block-start: 0;
}
:host([placed-bottom]) .sticker.stuck {
  inset-block-end: 0;
}
:host([placed-top]) .sticker.stuck.hide {
  transform: var(--top-hide);
}
:host([placed-bottom]) .sticker.stuck.hide {
  transform: var(--bottom-hide);
}

.sticker-content {
  display: flex;
  flex-wrap: wrap;
}