System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    --slide-gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    display: block;\n    position: relative;\n  }\n\n  .carousel {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n  }\n\n  .carousel__content-wrapper {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    width: 100%;\n    position: relative;\n  }\n\n  .carousel__navigation-wrapper--top-right {\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .carousel__slides {\n    display: flex;\n    flex-direction: row;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-snap-type: x mandatory;\n    scroll-behavior: smooth;\n    gap: var(--slide-gap);\n    padding: 0;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    flex: 1;\n    min-width: 0;\n  }\n\n  .carousel__slides::-webkit-scrollbar {\n    display: none;\n  }\n\n  .carousel__slides:focus {\n    outline: none;\n  }\n\n  .carousel__slides:focus-visible {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    outline-offset: 2px;\n  }\n\n  ::slotted(nile-carousel-item) {\n    flex: 0 0 calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));\n    min-width: 0;\n  }\n\n  .carousel__navigation-button--disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .carousel__pagination {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    margin-top: var(--nile-spacing-md, var(--ng-spacing-md));\n    position: relative;\n    z-index: 2;\n  }\n\n  .carousel__pagination-item {\n    width: 0.75rem;\n    height: 0.75rem;\n    padding: 0;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border: 2px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: 50%;\n    cursor: pointer;\n    transition: background-color 0.1s ease, transform 0.1s ease, border-color 0.1s ease, width 0.1s ease, height 0.1s ease;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  }\n\n  .carousel__pagination-item:hover {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-tertiary));\n    transform: scale(1.15);\n    border-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary));\n  }\n\n  .carousel__pagination-item--active {\n    width: 0.875rem;\n    height: 0.875rem;\n    background: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n  }\n\n  .carousel__pagination-item:focus {\n    outline: none;\n  }\n\n  .carousel__pagination-item:focus-visible {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    outline-offset: 2px;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n"]))));}};});
//# sourceMappingURL=nile-carousel.css.cjs.js.map
