/*
 * Secondary stylesheet for bits that don't belong in the Tailwind-managed file:
 * scroll-area controller internals and pull-to-refresh chrome.
 * The editorial design system lives in app/assets/tailwind/application.css.
 */

/* Hide scrollbar for scroll area component */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Scroll Area Fade Effects — register custom properties */
@property --fade-start-opacity {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}
@property --fade-end-opacity {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}
@property --fade-start-y-opacity {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}
@property --fade-end-y-opacity {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

.scroll-fade-y {
  --fade-start-opacity: 1;
  --fade-end-opacity: 1;
  --fade-size: 24px;

  mask-image:
    linear-gradient(to bottom,
      hsl(0 0% 0% / var(--fade-start-opacity)),
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      hsl(0 0% 0% / var(--fade-end-opacity))
    );
  -webkit-mask-image:
    linear-gradient(to bottom,
      hsl(0 0% 0% / var(--fade-start-opacity)),
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      hsl(0 0% 0% / var(--fade-end-opacity))
    );

  transition: --fade-start-opacity 300ms ease-out, --fade-end-opacity 300ms ease-out;
}

[data-overflow-y-start] .scroll-fade-y {
  --fade-start-opacity: 0;
  --fade-start-y-opacity: 0;
}

[data-overflow-y-end] .scroll-fade-y {
  --fade-end-opacity: 0;
  --fade-end-y-opacity: 0;
}

/* Pull-to-refresh indicator */
.pull-to-refresh-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.pull-to-refresh-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: var(--ink, #0e0e0c);
  color: var(--paper, #f7f5f0);
  border: 1px solid var(--rule-soft, rgba(20, 18, 14, 0.1));
  transition: transform 0.1s ease-out;
}

.pull-to-refresh-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}