{"version":3,"names":["kdxHeroCarouselCss","KdxHeroCarousel","render","h","class"],"sources":["src/components/heroes/kdx-hero-carousel/kdx-hero-carousel.scss?tag=kdx-hero-carousel","src/components/heroes/kdx-hero-carousel/kdx-hero-carousel.tsx"],"sourcesContent":[".kdx-hero-carousel {    \r\n    background: $primary;\r\n    position: relative;\r\n\r\n    .kdx-carousel {\r\n\r\n        &::before, &::after { display: none; }\r\n        &.only-1-item {\r\n            .kdx-hero-slide-item {\r\n                .hero-content { padding-bottom: 24px; }\r\n            }\r\n        }\r\n        .bullets-wrapper {\r\n            \r\n            &.internal {\r\n                transform: none;\r\n                left: 80px;        \r\n            }\r\n            .pause-action { \r\n                margin-left: 32px;\r\n                border-radius: 100%;\r\n                color: $heroCarouselDots;\r\n\r\n                &:hover, &:focus { \r\n                    transform: scale(1.4); \r\n                    background: $heroCarouselPauseHoverBG;\r\n\r\n                    svg { fill: $heroCarouselPauseHoverSvg; }\r\n                }\r\n            }\r\n            .glide__bullets {\r\n                button {\r\n                    background: $heroCarouselDots;\r\n                    \r\n                    &.glide__bullet--active {\r\n                        background: $heroCarouselDots;\r\n                    }\r\n                    &:hover, &:focus {\r\n                        background: $heroCarouselDotsHover;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        .controls button {\r\n            background: $heroArrowBG;\r\n            border: none;\r\n            width: 44px;\r\n            height: 44px;\r\n            \r\n            svg { fill: $heroArrowSvgColor; }\r\n            &:hover, &:focus {\r\n                background: $heroArrowBGHover;\r\n                border-color: $heroArrowBGHover;\r\n\r\n                svg { fill: $heroArrowSvgColorHover; }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(lg) {\r\n    .kdx-hero-carousel {\r\n        .hero-content {\r\n            .container-fluid { padding: 0 80px; }\r\n        }\r\n    }\r\n}\r\n\r\n@include media-breakpoint-down(lg) {\r\n    .kdx-hero-carousel {\r\n        background: $heroCarouselOverlayMobile;\r\n\r\n        .hero-content {\r\n            .container-fluid { padding: 0 30px; }\r\n        }\r\n        .kdx-carousel {\r\n\r\n            .bullets-wrapper {\r\n                \r\n                &.internal {\r\n                    left: 50%;        \r\n                    transform: translateX(-50%);\r\n                    bottom: 40px;\r\n                }\r\n                .pause-action { margin-left: 16px;}                \r\n            }\r\n            .controls button {\r\n                top: calc(230px / 2);\r\n                transform: translateY(-50%);\r\n            }\r\n        }\r\n    }\r\n}\r\n","import { Component, h } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'kdx-hero-carousel',\r\n    styleUrl: 'kdx-hero-carousel.scss'\r\n})\r\nexport class KdxHeroCarousel {    \r\n\r\n    render() {\r\n        return (\r\n            <section class=\"kdx-hero-carousel\" aria-label=\"hero carousel\">\r\n                <slot />\r\n            </section>\r\n        );\r\n    }\r\n}\r\n"],"mappings":"sCAAA,MAAMA,EAAqB,0pF,MCMdC,EAAe,M,yBAExB,MAAAC,GACI,OACIC,EAAA,WAASC,MAAM,oBAAmB,aAAY,iBAC1CD,EAAA,a"}