{"version":3,"names":["sewWsLinkCss","SewWsLink","constructor","hostRef","this","type","size","os","stackUp","icons","default","external","anchor","download","protected","email","back","iconSize","large","xl","bold","iconsXl","onTooltipToggle","event","detail","icon","render","h","Host","key","class"],"sources":["src/components/website-components/sew-ws-link/sew-ws-link.scss?tag=sew-ws-link&encapsulation=shadow","src/components/website-components/sew-ws-link/sew-ws-link.tsx"],"sourcesContent":[":host {\n    @include typo-ws-paragraph;\n\n    color: var(--link-color, $color-red);\n    display: block;\n    position: relative;\n\n    ::slotted(button) {\n        all: unset;\n    }\n\n    ::slotted(a),\n    ::slotted(button) {\n        display: block;\n        padding-left: clamp(26px, 1.806vw, 30px);\n        text-decoration: none;\n        color: currentColor;\n    }\n\n    ::slotted(.size) {\n        @include typo-ws-paragraph-s;\n\n        margin: 0 0 #{generate-clamp(2, 3)} 10px;\n        color: $color-grey-01-dark;\n        align-self: flex-end;\n    }\n\n    ::slotted(sew-ws-tooltip) {\n        display: none !important;\n    }\n\n    span {\n        position: relative;\n        display: flex;\n    }\n\n    .svg {\n        left: 0;\n        position: absolute;\n        top: clamp(2px, 0.139vw, 4px);\n\n        --svg-width: clamp(20px, 1.389vw, 22.5px) !important;\n\n        .shaft {\n            opacity: 0;\n            transition: opacity 0.2s;\n        }\n    }\n}\n\n:host(:hover) {\n    color: var(--link-color, $color-red);\n}\n\n:host(.stack-up) {\n    z-index: 1;\n}\n\n:host([type='default']) {\n    left: var(--offset, 0);\n\n    span {\n        transform: translate3d(-10px, 0, 0);\n        transition: transform 0.2s;\n    }\n}\n\n:host([type='default']:hover),\n:host([type='anchor']:hover) {\n    .svg {\n        .shaft {\n            opacity: 1;\n        }\n    }\n}\n\n:host([type='default']:hover) {\n    span {\n        transform: translate3d(-4px, 0, 0);\n    }\n}\n\n:host([type='external']),\n:host([type='download']),\n:host([type='protected']),\n:host([type='anchor']) {\n    .svg {\n        top: generate-clamp(2, 3);\n        left: -2px;\n    }\n\n    ::slotted(a) {\n        padding-left: clamp(19px, 1.319vw, 22px);\n        transition: transform 0.2s;\n    }\n\n    ::slotted(span) {\n        transition: transform 0.2s;\n    }\n}\n\n:host([type='external']:hover),\n:host([type='download']:hover) {\n    ::slotted(a),\n    ::slotted(span) {\n        transform: translate3d(8px, 0, 0);\n    }\n}\n\n:host([type='external']) {\n    .arrow {\n        transition: transform 0.2s;\n    }\n    ::slotted(a) {\n        padding-left: clamp(22px, 1.528vw, 25px);\n    }\n}\n\n:host([type='external']:hover) {\n    .arrow {\n        transform: translate(2px, -2px);\n    }\n}\n\n@keyframes download-animation {\n    0% {\n        transform: translateY(0);\n    }\n    50% {\n        transform: translateY(-3px);\n    }\n    100% {\n        transform: translateY(0);\n    }\n}\n:host([type='download']:hover) {\n    .arrow {\n        animation: download-animation 0.5s;\n    }\n}\n\n:host([type='anchor']) {\n    .svg {\n        top: 0;\n        transform: translate3d(0, 0, 0);\n        transition: transform 0.2s;\n    }\n}\n\n:host([type='anchor']:hover) {\n    .svg {\n        transform: translate3d(0, 4px, 0);\n    }\n}\n\n:host([type='back']) {\n    ::slotted(button) {\n        padding-left: 16px;\n    }\n}\n\n:host([size='large']) {\n    @include typo-ws-copy-l;\n\n    color: var(--link-color, $color-grey-01-dark);\n\n    ::slotted(a) {\n        padding-left: generate-clamp(20, 36);\n    }\n\n    .svg {\n        --svg-width: #{generate-clamp(20, 36)} !important;\n\n        top: generate-clamp(3, 5);\n        left: generate-negative-clamp(-4, -7);\n    }\n}\n\n:host([size='large'][type='default']) {\n    span {\n        transform: translate3d(generate-negative-clamp(-4.4, -8), 0, 0);\n    }\n}\n\n:host([size='large'][type='default']:hover) {\n    color: var(--link-color, $color-red);\n\n    span {\n        transform: translate3d(2px, 0, 0);\n    }\n}\n\n:host([size='xl']) {\n    @include typo-ws-copy-xl;\n\n    color: $color-grey-01-dark;\n\n    ::slotted(a) {\n        padding-left: generate-clamp(20, 36);\n    }\n\n    .svg {\n        --svg-width: #{generate-clamp(20, 36)} !important;\n\n        top: generate-clamp(6, 10);\n        left: generate-negative-clamp(-4.3, -9);\n    }\n}\n\n:host([size='xl'][type='default']) {\n    span {\n        transform: translate3d(generate-negative-clamp(-4.3, -8), 0, 0);\n    }\n}\n\n:host([size='xl'][type='default']:hover) {\n    color: $color-red;\n\n    span {\n        transform: translate3d(3px, 0, 0);\n    }\n}\n\n:host([size='bold']) {\n    @include typo-ws-paragraph-bold;\n}\n\n:host([os]) {\n    color: var(--color-text-default);\n\n    ::slotted(sew-ws-tooltip) {\n        margin-left: 8px;\n\n        @include mq-2-min {\n            display: none !important;\n        }\n    }\n}\n\n:host([os]:hover) {\n    color: $color-red;\n\n    ::slotted(sew-ws-tooltip) {\n        display: inline-block !important;\n    }\n}\n","import { Component, Prop, Host, State, Listen, h } from '@stencil/core';\nimport { IconSize } from '../../sew-svg-icon/sew-icon.types';\n\n@Component({\n    tag: 'sew-ws-link',\n    styleUrl: 'sew-ws-link.scss',\n    shadow: true,\n})\nexport class SewWsLink {\n    /**\n     * State of button.\n     */\n    @Prop({ reflect: true }) type:\n        | 'default'\n        | 'external'\n        | 'anchor'\n        | 'download'\n        | 'email'\n        | 'protected'\n        | 'back' = 'default';\n    @Prop({ reflect: true }) size: 'default' | 'large' | 'xl' | 'bold' = 'default';\n    @Prop({ reflect: true }) os = false;\n    @State() stackUp = false;\n\n    @Listen('tooltipToggle')\n    public onTooltipToggle(event: CustomEvent<boolean>): void {\n        this.stackUp = event.detail;\n    }\n\n    private icons = {\n        default: 'arrow-east',\n        external: 'launch',\n        anchor: 'arrow-down',\n        download: 'download',\n        protected: 'lock-locked',\n        email: 'mail',\n        back: 'arrow-west',\n    };\n\n    private iconSize = {\n        default: 's',\n        large: 'm',\n        xl: 'l',\n        bold: 's',\n    };\n\n    private iconsXl = {\n        default: 'arrow-right',\n    };\n\n    private icon() {\n        if (this.size === 'xl' || this.size === 'large') {\n            return this.iconsXl[this.type];\n        }\n\n        return this.icons[this.type];\n    }\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'stack-up': this.stackUp,\n                }}\n            >\n                <span>\n                    <sew-icon class=\"svg\" size={this.iconSize[this.size] as IconSize} icon={this.icon()} />\n                    <slot></slot>\n                </span>\n            </Host>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,6zI,MCQRC,EAAS,MALtB,WAAAC,CAAAC,G,UAS6BC,KAAIC,KAOd,UACUD,KAAIE,KAAwC,UAC5CF,KAAEG,GAAG,MACrBH,KAAOI,QAAG,MAOXJ,KAAAK,MAAQ,CACZC,QAAS,aACTC,SAAU,SACVC,OAAQ,aACRC,SAAU,WACVC,UAAW,cACXC,MAAO,OACPC,KAAM,cAGFZ,KAAAa,SAAW,CACfP,QAAS,IACTQ,MAAO,IACPC,GAAI,IACJC,KAAM,KAGFhB,KAAAiB,QAAU,CACdX,QAAS,cAyBhB,CA/CU,eAAAY,CAAgBC,GACnBnB,KAAKI,QAAUe,EAAMC,M,CAwBjB,IAAAC,GACJ,GAAIrB,KAAKE,OAAS,MAAQF,KAAKE,OAAS,QAAS,CAC7C,OAAOF,KAAKiB,QAAQjB,KAAKC,K,CAG7B,OAAOD,KAAKK,MAAML,KAAKC,K,CAG3B,MAAAqB,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CACDC,MAAO,CACH,WAAY1B,KAAKI,UAGrBmB,EAAA,QAAAE,IAAA,4CACIF,EAAU,YAAAE,IAAA,2CAAAC,MAAM,MAAMxB,KAAMF,KAAKa,SAASb,KAAKE,MAAmBmB,KAAMrB,KAAKqB,SAC7EE,EAAa,QAAAE,IAAA,8C","ignoreList":[]}