{"version":3,"names":["kdxSectionTitleCss","KdxSectionTitle","render","h","class","this","orientation"],"sources":["src/components/kdx-section-title/kdx-section-title.scss?tag=kdx-section-title","src/components/kdx-section-title/kdx-section-title.tsx"],"sourcesContent":[".kdx-section-title {\r\n    @include line-height(26);\r\n\r\n    h2 {\r\n        position: relative;\r\n        padding-bottom: 16px;\r\n        margin: 16px 0 24px 0;        \r\n\r\n        &::after {\r\n            content: '';\r\n            background: $sectionTitleBorderColor;\r\n            width: 100%;\r\n            max-width: 65px;\r\n            height: 4px;\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n        }\r\n    }\r\n    &.center-aligned { text-align: center; }\r\n    &.left-aligned { \r\n        text-align: left; \r\n\r\n        h2 {\r\n\r\n            &::after {\r\n                left: 0;\r\n                transform: none;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n@include media-breakpoint-down(md) {\r\n    .kdx-section-title {\r\n        @include text-size(14);\r\n        @include line-height(22);\r\n\r\n        h2 {\r\n\r\n            &::after { max-width: 45px; }\r\n        }\r\n    }\r\n}","import { Component, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'kdx-section-title',\r\n    styleUrl: 'kdx-section-title.scss'\r\n})\r\nexport class KdxSectionTitle {\r\n\r\n    @Prop() orientation: string = \"center-aligned\";  // left-aligned or center-aligned\r\n\r\n    render() {\r\n        return (\r\n            <div class={`kdx-section-title ${this.orientation}`}>\r\n                <slot />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"],"mappings":"2CAAA,MAAMA,EAAqB,ysC,MCMdC,EAAe,M,0CAEM,gB,CAE9B,MAAAC,GACI,OACIC,EAAA,OAAKC,MAAO,qBAAqBC,KAAKC,eAClCH,EAAA,a"}