import { r as registerInstance, h, H as Host } from './index-3e697abd.js';

const sectionTitleComponentCss = "*{font:inherit;color:inherit;line-height:inherit;text-decoration:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}*:focus{outline:none}button{background:none;border:none}.SectionTitle{margin-bottom:60px;text-align:center}@media screen and (max-width: 1000px){.SectionTitle{margin-bottom:7.5vw}}@media screen and (max-width: 400px){.SectionTitle{margin-bottom:30px}}.SectionTitle.inline,.SectionTitle.medium,.SectionTitle.large{margin-left:0;margin-right:0;text-align:left}.SectionTitle.large .SectionTitle--headline{font-size:80px;font-weight:bold;line-height:1.075;margin-top:0}@media screen and (max-width: 1000px){.SectionTitle.large .SectionTitle--headline{font-size:50px;line-height:1.14}}@media screen and (max-width: 750px){.SectionTitle.large .SectionTitle--headline{font-size:40px;line-height:1.14}}.SectionTitle.large .SectionTitle--content{font-size:30px;font-weight:bold;line-height:1.2;font-weight:200}[lang=zh] .SectionTitle.large .SectionTitle--content,[lang=zh-Hant] .SectionTitle.large .SectionTitle--content,[lang=zh-Hans] .SectionTitle.large .SectionTitle--content,[lang=zh-CN] .SectionTitle.large .SectionTitle--content{line-height:1.5}@media screen and (max-width: 1000px){.SectionTitle.large .SectionTitle--content{font-size:22px;line-height:1.3}}.template-dark #body .SectionTitle .SectionTitle--title,.template-dark #body .SectionTitle .SectionTitle--content,.template-dark.styleguide-example--dark .SectionTitle .SectionTitle--title,.template-dark.styleguide-example--dark .SectionTitle .SectionTitle--content{color:rgba(255, 255, 255, 0.8)}.SectionTitle--title{font-size:15px;font-weight:normal;text-transform:uppercase;letter-spacing:0.1em;color:#636363;display:block}.SectionTitle--headline{font-size:50px;font-weight:bold;line-height:1.14;display:block}@media screen and (max-width: 1000px){.SectionTitle--headline{font-size:30px;line-height:1.3}}.SectionTitle{margin-left:calc(50% - 307.5px);margin-right:calc(50% - 307.5px)}@media (max-width: 815px){.SectionTitle{margin-left:75px;margin-right:75px}}@media screen and (max-width: 1000px){.SectionTitle{margin-left:60px;margin-right:60px}}@media screen and (max-width: 750px){.SectionTitle{margin-left:30px;margin-right:30px}}@media screen and (max-width: 580px){.SectionTitle{margin-left:20px;margin-right:20px}}@media print{.SectionTitle{max-width:100%;margin:0}}.SectionTitle.inline,.SectionTitle.medium,.SectionTitle.large{margin-bottom:30px}@media screen and (max-width: 1000px){.SectionTitle.inline,.SectionTitle.medium,.SectionTitle.large{margin-bottom:3.75vw}}@media screen and (max-width: 400px){.SectionTitle.inline,.SectionTitle.medium,.SectionTitle.large{margin-bottom:15px}}.SectionTitle.wide{margin-left:calc(50% - 384.375px);margin-right:calc(50% - 384.375px)}@media (max-width: 968.75px){.SectionTitle.wide{margin-left:75px;margin-right:75px}}@media screen and (max-width: 1000px){.SectionTitle.wide{margin-left:60px;margin-right:60px}}@media screen and (max-width: 750px){.SectionTitle.wide{margin-left:30px;margin-right:30px}}@media screen and (max-width: 580px){.SectionTitle.wide{margin-left:20px;margin-right:20px}}@media print{.SectionTitle.wide{max-width:100%;margin:0}}.SectionTitle.small:not(.inline){max-width:430px;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto}.SectionTitle.small .SectionTitle--headline{font-size:30px;font-weight:bold;line-height:1.2;margin-top:15px}[lang=zh] .SectionTitle.small .SectionTitle--headline,[lang=zh-Hant] .SectionTitle.small .SectionTitle--headline,[lang=zh-Hans] .SectionTitle.small .SectionTitle--headline,[lang=zh-CN] .SectionTitle.small .SectionTitle--headline{line-height:1.5}@media screen and (max-width: 1000px){.SectionTitle.small .SectionTitle--headline{font-size:22px;line-height:1.3}}.SectionTitle.medium .SectionTitle--content{font-size:30px;font-weight:bold;line-height:1.2;font-weight:200}[lang=zh] .SectionTitle.medium .SectionTitle--content,[lang=zh-Hant] .SectionTitle.medium .SectionTitle--content,[lang=zh-Hans] .SectionTitle.medium .SectionTitle--content,[lang=zh-CN] .SectionTitle.medium .SectionTitle--content{line-height:1.5}@media screen and (max-width: 1000px){.SectionTitle.medium .SectionTitle--content{font-size:22px;line-height:1.3}}.SectionTitle.white .SectionTitle--title,.SectionTitle.white .SectionTitle--headline,.SectionTitle.white .SectionTitle--content{color:#ffffff}.SectionTitle--title+.SectionTitle--headline{margin-top:30px}@media screen and (max-width: 1000px){.SectionTitle--title+.SectionTitle--headline{margin-top:3.75vw}}@media screen and (max-width: 400px){.SectionTitle--title+.SectionTitle--headline{margin-top:15px}}.SectionTitle--content{margin-top:30px;color:#3C3C3C}@media screen and (max-width: 1000px){.SectionTitle--content{margin-top:3.75vw}}@media screen and (max-width: 400px){.SectionTitle--content{margin-top:15px}}.SectionTitle--title:empty{display:none}";

const SectionTitle = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Heading level – always set this to make sure your heading structure is correct
         */
        this.ariaLevel = 2;
        /**
         * Size
         */
        this.size = 'default';
    }
    render() {
        if (!this.headline && !this.superscript) {
            console.warn('You should set either a superscript or a headline for <sr-sectiontitle>!');
        }
        const classes = ['SectionTitle', this.size].filter(c => c !== 'default');
        return (h(Host, { role: "heading" }, h("div", { class: classes.join(' ') }, h("div", { class: "SectionTitle--wrapper" }, this.superscript && h("span", { class: "SectionTitle--title" }, "\u200B\uFEFF ", this.superscript), this.headline && h("span", { class: "SectionTitle--headline" }, "\u200B\uFEFF ", this.headline)), h("div", { class: "SectionTitle--content" }, h("slot", null)))));
    }
};
SectionTitle.style = sectionTitleComponentCss;

export { SectionTitle as sr_section_title };
