/** * TyScrollContainer styles * Component-specific styles + shared custom scrollbar styles */ export declare const scrollContainerStyles = "\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n}\n\n.scroll-wrapper {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators */\n/* ===================================== */\n\n.shadow-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n position: absolute;\n opacity: 0;\n transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n pointer-events: none;\n}\n\n.shadow-top {\n top: -40px;\n left: 0;\n right: 0;\n height: 80px;\n background: var(--ty-scroll-shadow-top, radial-gradient(\n ellipse 100% 30% at center,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n bottom: -30px;\n left: 0;\n right: 0;\n height: 60px;\n background: var(--ty-scroll-shadow-bottom, radial-gradient(\n ellipse 100% 20% at center,\n rgba(0, 0, 0, 0.15),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n left: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-left, radial-gradient(\n ellipse 30% 100% at center,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n right: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-right, radial-gradient(\n ellipse 30% 100% at center,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n opacity: 1;\n}\n\n:host([shadow=\"false\"]) .shadow-overlay {\n display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n :host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: thin;\n scrollbar-color: var(--ty-border, rgba(0,0,0,0.2)) transparent;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: block;\n width: 4px;\n height: 4px;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n background: var(--ty-border, rgba(0,0,0,0.2));\n border-radius: 2px;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .shadow-top,\n .shadow-bottom,\n .shadow-left,\n .shadow-right {\n transition-duration: 0ms !important;\n }\n}\n\n/* Shared scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-y {\n position: absolute;\n right: 0;\n width: 100%;\n min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-x {\n position: absolute;\n bottom: 0;\n height: 100%;\n min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x {\n display: none !important;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x,\n .ty-scrollbar-thumb-y,\n .ty-scrollbar-thumb-x {\n transition-duration: 0ms !important;\n }\n}\n\n"; //# sourceMappingURL=scroll-container.d.ts.map