[data-calio-sticky-content="yes"] {
  --calio-sticky-active-bg: transparent;
  --calio-sticky-active-border-color: transparent;
  --calio-sticky-active-border-width: 0px;
  --calio-sticky-active-lift: 2px;
  --calio-sticky-bottom-guard: 0px;
  --calio-sticky-shadow-color: rgba(15, 23, 42, 0.08);
  --calio-sticky-shadow-blur: 40px;
  --calio-sticky-shadow: 0 18px var(--calio-sticky-shadow-blur) var(--calio-sticky-shadow-color);
}

.calio-sticky-content-host {
  transition: box-shadow 220ms ease, transform 220ms ease, opacity 220ms ease, background-color 220ms ease, border-color 220ms ease;
  background: var(--calio-sticky-active-bg);
  border-style: solid;
  border-color: var(--calio-sticky-active-border-color);
  border-width: 0;
  margin-bottom: var(--calio-sticky-bottom-guard);
}

.calio-sticky-content-host.has-sticky-shadow.is-sticky-active {
  box-shadow: var(--calio-sticky-shadow);
}

.calio-sticky-content-host.has-sticky-active-state.is-sticky-active {
  transform: translateY(calc(var(--calio-sticky-active-lift) * -1));
  border-width: var(--calio-sticky-active-border-width);
}

.calio-sticky-content-host.is-sticky-blocked {
  opacity: 0.9;
}

.calio-sticky-content-host.is-sticky-stopped {
  box-shadow: none;
}