/**
 * Sticky Element Styles
 *
 * Minimal CSS that doesn't override theme properties.
 * The JS handles positioning, this just adds visual polish.
 */

/* Placeholder - invisible spacer to prevent layout shift */
.sticky-placeholder {
  pointer-events: none;
}

/* Element when sticky */
.is-sticky {
  /* Box shadow for depth when floating */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Smooth transition when becoming sticky */
  transition: box-shadow 0.2s ease;
}

/* Optional: Subtle animation when sticking */
@keyframes sticky-slide-in {
  from {
    opacity: 0.8;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.is-sticky {
  animation: sticky-slide-in 0.2s ease-out;
}

/* Inner content scrollbar styling when sticky */
.is-sticky .uni-col-content::-webkit-scrollbar {
  width: 6px;
}

.is-sticky .uni-col-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.is-sticky .uni-col-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.is-sticky .uni-col-content::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}