import{S as $}from"./sbk-element-D0ymjRIy.js";import{t as f}from"./custom-element-BhZVzxrc.js";import{n as t}from"./property-1JAdfsvf.js";import{i as y,r as B,k as a,D as h,h as x}from"./lit-element-DDcuVA3y.js";import{b as O}from"./button--onDark.styles-DnSVf0w0.js";import{s as L,b as C}from"./variables-BWf6YqMz.js";import{n as k}from"./when-BxLAFfhK.js";const S=y`

  --_round-button__color: var(--sbkRoundButtonBgColorOnLightEnabled);
  --_round-button__color--active: var(--sbkRoundButtonBgColorOnDarkEnabled);
  --_round-button__color--hover: var(--sbkRoundButtonFgColorOnDarkDefault);
  --_round-button__color--focus: var(--sbkRoundButtonBgColorOnLightEnabled);
  --_round-button__color--disabled: var(--sbkRoundButtonFgColorOnLightDisabled);
  --_round-button__color--error: var(--sbkRoundButtonFgColorOnDarkDefault);
  --_round-button-icon-only__color: var(--sbkRoundButtonBgColorOnDarkEnabled);

  --_round-button__bg: var(--sbkRoundButtonBgColorOnDarkEnabled);
  --_round-button__bg--active: var(--sbkRoundButtonBgColorOnDarkActive);
  --_round-button__bg--hover: var(--sbkRoundButtonBgColorOnDarkHover);
  --_round-button__bg--focus: var(--sbkRoundButtonBgColorOnDarkFocus);
  --_round-button__bg--disabled: var(--sbkRoundButtonBgColorOnDarkDisabled);
  --_round-button__bg--error: var(--sbkRoundButtonBgColorOnDarkError);
  --_round-button-icon-only__bg: var(--sbkRoundButtonBgColorOnDarkEnabledTransparent);

  --_round-button__border-color: var(--sbkRoundButtonBorderOnDarkMarked);
  --_round-button__border-color--active: var(--sbkButtonBorderOnDarkActive);
  --_round-button__border-color--hover: var(--sbkButtonBorderOnDarkHover);
  --_round-button__border-color--focus: var(--sbkButtonBorderOnDarkFocus);
  --_secondary-button__border-color--disabled: var(--sbkButtonBorderOnDarkDisabled);
  --_secondary-button__border-color--error: var(--sbkButtonBorderOnDarkDisabled);
`,w=B(`${L}`),R=y`

  :host([alternativestyling]) {
    ${O}
  }

  :host {
      --button__border--focus: var(--_button__border--focus, var(--sbkButtonBorderOnLightFocus));

      --primary-button__bg: var(--_primary-button__bg, var(--sbkButtonBgColorPrimaryOnLightEnabled));
      --primary-button__color: var(--_primary-button__color, var(--sbkButtonFgColorOnDarkDefault));
      --primary-button__bg--hover: var(--_primary-button__bg--hover, var(--sbkButtonBgColorPrimaryOnLightHover));
      --primary-button__color--hover: var(--_primary-button__color--hover, var(--sbkButtonFgColorOnDarkDefault));
      --primary-button__bg--active: var(--_primary-button__bg--active, var(--sbkButtonBgColorPrimaryOnLightActive));
      --primary-button__color--active: var(--_primary-button__color--active, var(--sbkButtonFgColorOnDarkDefault));
      --primary-button__bg--focus: var(--_primary-button__bg--focus, var(--sbkButtonBgColorPrimaryOnLightFocus));
      --primary-button__color--focus: var(--_primary-button__color--focus, var(--sbkButtonFgColorOnDarkDefault));
      --primary-button__bg--disabled: var(--_primary-button__bg--disabled, var(--sbkButtonBgColorPrimaryOnLightDisabled));
      --primary-button__color--disabled: var(--_primary-button__color--disabled, var(--sbkButtonFgColorOnLightDisabled));

      --secondary-button__bg: var(--_secondary-button__bg, var(--sbkButtonBgColorSecondaryOnLightEnabled));
      --secondary-button__color: var(--_secondary-button__color, var(--sbkButtonFgColorOnLightDefault));
      --secondary-button__bg--hover: var(--_secondary-button__bg--hover, var(--sbkButtonBgColorSecondaryOnLightHover));
      --secondary-button__color--hover: var(--_secondary-button__color--hover, var(--sbkButtonSecondaryFgColorOnLightHover));
      --secondary-button__bg--active: var(--_secondary-button__bg--active, var(--sbkButtonBgColorSecondaryOnLightActive));
      --secondary-button__color--active: var(--_secondary-button__color--active, var(--sbkButtonFgColorOnDarkDefault));
      --secondary-button__bg--focus: var(--_secondary-button__bg--focus, var(--sbkButtonBgColorSecondaryOnLightFocus));
      --secondary-button__color--focus: var(--_secondary-button__color--focus, var(--sbkButtonFgColorOnDarkDefault));
      --secondary-button__bg--disabled: var(--_secondary-button__bg--disabled, var(--sbkButtonBgColorSecondaryOnLightDisabled));
      --secondary-button__color--disabled: var(--_secondary-button__color--disabled, var(--sbkButtonFgColorOnLightDisabled));
      --secondary-button__border-color: var(--_secondary-button__border-color, var(--sbkButtonBorderOnLightEnabled));
      --secondary-button__border-color--hover: var(--_secondary-button__border-color--hover, var(--sbkButtonBorderOnLightHover));
      --secondary-button__border-color--focus: var(--_secondary-button__border-color--focus, var(--sbkButtonBgColorSecondaryOnLightFocus));
      --secondary-button__border-color--active: var(--_secondary-button__border-color--active, var(--sbkButtonBorderOnLightActive));
      --secondary-button__border-color--disabled: var(--_secondary-button__border-color--disabled, var(--sbkButtonBorderOnLightDisabled));

      --cta-button__bg: var(--_cta-button__bg, var(--sbkButtonBgColorCtaOnLightEnabled));
      --cta-button__color: var(--_cta-button__color, var(--sbkButtonFgColorOnLightDefault));
      --cta-button__border: var(--_cta-button__border, var(--sbkButtonBorderOnLightDefault));
      --cta-button__bg--hover: var(--_cta-button__bg--hover, var(--sbkButtonBgColorCtaOnLightHover));
      --cta-button__color--hover: var(--_cta-button__color--hover, var(--sbkButtonFgColorOnLightDefault));
      --cta-button__bg--active: var(--_cta-button__bg--active, var (--sbkButtonBgColorCtaOnLightActive));
      --cta-button__color--active: var(--_cta-button__color--active, var(--sbkButtonFgColorOnLightDefault));
      --cta-button__bg--focus: var(--_cta-button__bg--focus, var(--sbkButtonBgColorCtaOnLightFocus));
      --cta-button__color--focus: var(--_cta-button__color--focus, var(--sbkButtonFgColorOnLightDefault));
      --cta-button__bg--disabled: var(--_cta-button__bg--disabled, var(--sbkButtonBgColorCtaOnLightDisabled));
      --cta-button__color--disabled: var(--_cta-button__color--disabled, var(--sbkButtonFgColorOnLightDisabled));

      display: inline-block;
  }

  a {
      width: fit-content;
  }

  .button {
      part: button;
      display: flex;
      gap: var(--sbkButton3xs);
      align-items: center;
      justify-content: center;
      outline: 2px solid transparent;
      outline-offset: var(--sbkButtonBorderGapFocus);
      border-radius: var(--sbkButtonBorderRadiusDefault);
      border: none;
      cursor: pointer;
      text-decoration: none;
      fill: currentColor;
  }

  .button:focus-visible {
      outline: var(--button__border--focus);
  }

  .button[disabled] {
      cursor: not-allowed;
  }

  .button-small {
      font: var(--sbkButtonSmallLabelSm);
      padding: var(--sbkButton2xs) var(--sbkButtonMd);
  }

  .button-large {
      font: var(--sbkButtonLargeLableMd);
      padding: var(--sbkButtonXs) var(--sbkButtonXl);
  }

  .button-adaptive{
    font: var(--sbkButtonSmallLabelSm);
    padding: var(--sbkButton2xs) var(--sbkButtonMd);
  }
    @media screen and (min-width: ${w}) {
    .button-adaptive{
        font: var(--sbkButtonLargeLableMd);
        padding: var(--sbkButtonXs) var(--sbkButtonXl);
    }}

  .button-table {
    width: initial !important;
  }

  /* Primary Button Styles */

  .button-primary {
      background-color: var(--primary-button__bg);
      color: var(--primary-button__color);
      border: var(--secondary-button__border-color); 
      border-color: var(--primary-button__bg);
  }

    @media (hover: hover) and (pointer: fine) {
        .button-primary:hover {
            background-color: var(--primary-button__bg--hover);
            color: var(--primary-button__color--hover);
            &:not(:focus-visible):not(:active){
                border-color: var(--primary-button__bg--hover);
            }

        }
    }

  .button-primary:active {
      background-color: var(--primary-button__bg--active);
      color: var(--primary-button__color--active);
       border-color: var(--primary-button__bg--active);
  }

  .button-primary:focus-visible {
      background-color: var(--primary-button__bg--focus);
      color: var(--primary-button__color--focus);
      border-color: var(--primary-button__bg--focus);
  }

  .button-primary[disabled] {
      background-color: var(--primary-button__bg--disabled);
      color: var(--primary-button__color--disabled);
      border-color: var(--primary-button__bg--disabled);
  }

  /* Secondary Button Styles */

  .button-secondary {
      background-color: var(--secondary-button__bg);
      border: var(--secondary-button__border-color);
      color: var(--secondary-button__color);
  }

    @media (hover: hover) and (pointer: fine) {
        .button-secondary:hover {
            background-color: var(--secondary-button__bg--hover);
            border: var(--secondary-button__border-color--hover);
            color: var(--secondary-button__color--hover);
        }
    }

  .button-secondary:active {
      background-color: var(--secondary-button__bg--active);
      border: var(--secondary-button__border-color--active);
      color: var(--secondary-button__color--active);
  }

  .button-secondary:focus-visible {
      background-color: var(--secondary-button__bg--focus);
      border-color: var(--secondary-button__border-color--focus);
      color: var(--secondary-button__color--focus);
  }

  .button-secondary[disabled] {
      background-color: var(--secondary-button__bg--disabled);
      border: var(--secondary-button__border-color--disabled);
      color: var(--secondary-button__color--disabled);
  }

  /* CTA Button Styles */
  .button-cta {
      background-color: var(--cta-button__bg);
      border: var(--cta-button__border);
      color: var(--cta-button__color);
  }

    @media (hover: hover) and (pointer: fine) {
        .button-cta:hover {
            background-color: var(--cta-button__bg--hover);
            color: var(--cta-button__color--hover);
        }
    }

  .button-cta:active {
      background-color: var(--cta-button__bg--active);
      color: var(--cta-button__color--active);
  }

  .button-cta:focus-visible {
      background-color: var(--cta-button__bg--focus);
      color: var(--cta-button__color--focus);
  }

  .button-cta[disabled] {
      background-color: var(--cta-button__bg--disabled);
      color: var(--cta-button__color--disabled);
      border-color: var(--cta-button__bg--disabled);
  }

  /* Meta CTA Button Styles */
  .button-meta-cta {
      background-color: var(--cta-button__bg);
      border-radius: var(--sbkButtonBorderRadiusMetaCta) var(--sbkButtonBorderRadiusMetaCta) 0 0;
      color: var(--cta-button__color);
  }

    @media (hover: hover) and (pointer: fine) {
        .button-meta-cta:hover {
            background-color: var(--cta-button__bg--hover);
            color: var(--cta-button__color--hover);
        }
    }

  .button-meta-cta:active {
      background-color: var(--cta-button__bg--active);
      color: var(--cta-button__color--active);
  }

  .button-meta-cta:focus-visible {
      background-color: var(--cta-button__bg--focus);
      color: var(--cta-button__color--focus);
  }

  .button-meta-cta[disabled] {
      background-color: var(--cta-button__bg--disabled);
      color: var(--cta-button__color--disabled);
  }
`;var D=Object.defineProperty,z=Object.getOwnPropertyDescriptor,c=(r,o,s,i)=>{for(var n=i>1?void 0:i?z(o,s):o,d=r.length-1,u;d>=0;d--)(u=r[d])&&(n=(i?u(o,s,n):u(n))||n);return i&&n&&D(o,s,n),n};let l=class extends ${constructor(){super(...arguments),this.name="",this.icon="",this.iconPosition="left",this.iconOnly=!1,this.disabled=!1,this.alternativestyling=!1,this.inTable=!1,this.href="",this.size="adaptive",this.target="",this.value="",this.variant="primary",this.type="button"}connectedCallback(){if(super.connectedCallback(),this.type==="submit"){const r=document.createElement("input");r.type="submit",r.name=this.name??"",r.value=this.value??"",r.hidden=!0;const o=this.closest("form");o==null||o.appendChild(r),this.fakeSubmitButton=r}}static get styles(){return R}render(){return this.href?this.renderLink():this.renderButton()}renderButton(){return a`
            <button
                part="button"
                title=${this.title||h}
                class="button button-${this.variant} button-${this.size} button-${this.alternativeStyling}-styling ${this.inTable?"button-table":""} ${this.iconOnly?"button-icon-only":""}"
                type='button'
                ?disabled=${this.disabled}
                aria-labelledby="button-label"
                ?alternativestyling=${this.alternativestyling}
                .value=${this.value}
                @click=${this.type==="submit"?this._handleSubmit:this._handleClick}
            >
                ${this.renderIconLeft()}
                <span id="button-label">
                    <slot></slot>
                </span>
                ${this.renderIconRight()}
            </button>
        `}renderLink(){return a`
            <a
              part="button"
              id="button"
              class="button button-${this.variant} ${this.inTable?"button-table":""} button-${this.size}${this.iconOnly?" button-icon-only":""}"
              role="button"
              href=${this.href}
              title=${this.title||h}
              target=${this.target||h}
              ?disabled=${this.disabled}
            >
                ${this.renderIconLeft()}
                <slot class="button__content"></slot>
                ${this.renderIconRight()}
            </a>
        `}renderIconLeft(){return!this.icon&&this.variant!=="cta"||this.icon&&this.iconPosition!=="left"?a`${h}`:a`
            <div class="icon-wrapper"><sbk-icon size=${this.getIconSize(this.size)} symbol=${this.variant==="cta"?"logo":this.icon}></sbk-icon></div>
        `}renderIconRight(){return!this.icon&&this.variant!=="cta"||this.icon&&this.iconPosition!=="right"?a`${h}`:a`
            <div class="icon-wrapper"><sbk-icon size=${this.getIconSize(this.size)} symbol=${this.variant==="cta"?"chevron-right":this.icon}></sbk-icon></div>
        `}getIconSize(r){switch(r){case"small":case"medium":return 20;case"large":return 24;default:return 24}}_handleClick(){const r=new CustomEvent("sbk-click");this.dispatchEvent(r)}_handleSubmit(){const r=new CustomEvent("sbk-click");this.dispatchEvent(r);const o=this.closest("form");o==null||o.requestSubmit(this.fakeSubmitButton)}};c([t({type:String})],l.prototype,"name",2);c([t({type:String})],l.prototype,"icon",2);c([t({attribute:"icon-position"})],l.prototype,"iconPosition",2);c([t({type:Boolean,attribute:"icon-only"})],l.prototype,"iconOnly",2);c([t({type:Boolean})],l.prototype,"disabled",2);c([t({type:Boolean})],l.prototype,"alternativestyling",2);c([t({type:Boolean})],l.prototype,"inTable",2);c([t({type:String})],l.prototype,"href",2);c([t()],l.prototype,"size",2);c([t()],l.prototype,"target",2);c([t({type:String})],l.prototype,"value",2);c([t()],l.prototype,"variant",2);c([t()],l.prototype,"alternativeStyling",2);c([t()],l.prototype,"type",2);l=c([f("sbk-button")],l);const M=B(`${L}`),F=y`
  :host {
      display: flex;
      box-sizing: border-box;
  }

    .icon {
        box-sizing: border-box;
        fill: currentColor;
    }

    .icon-16 {
        height: 16px;
        width: 16px;
    }

    .icon-20 {
        height: 20px;
        width: 20px;
    }

    .icon-24 {
        height: 24px;
        width: 24px;
    }

    .icon-32 {
        height: 32px;
        width: 32px;
    }

    .icon-40 {
        height: 40px;
        width: 40px;
    }

    .icon-64 {
        height: 64px;
        width: 64px;
    }

    .icon-112 {
        height: var(--sbkModalSizingImageHeight);
        width: var(--sbkModalSizingImageHeight);
    }

    .icon-24.responsive {
        height: 20px;
        width: 20px;

        @media screen and (min-width: ${M}) {
            height: 24px;
            width: 24px;
        }
    }
`;var H=Object.defineProperty,I=Object.getOwnPropertyDescriptor,m=(r,o,s,i)=>{for(var n=i>1?void 0:i?I(o,s):o,d=r.length-1,u;d>=0;d--)(u=r[d])&&(n=(i?u(o,s,n):u(n))||n);return i&&n&&H(o,s,n),n};let p=class extends ${constructor(){super(...arguments),this.symbol="",this.size="24",this.description="",this.responsive=!1}static get styles(){return F}render(){const r=this.description?"icon-title":!1,o=location.port==="5173"||location.port==="6006"?"/icons/sprite.svg":"/typo3conf/ext/mms_sbk_sitepackage/Resources/Public/icons/sprite.svg";return a`
            <svg
                class="icon icon-${this.size} ${this.responsive?"responsive":""}"
                aria-describedby=${r||h}
                aria-hidden=${this.description?"false":"true"}
                role="img"
            >
                ${k(this.description,()=>a`<title id="icon-title">${this.description}</title>`)}
                <use href="${o}#icon-${this.symbol}"></use>
            </svg>
        `}};m([t({type:String})],p.prototype,"symbol",2);m([t({type:String})],p.prototype,"size",2);m([t({type:String})],p.prototype,"description",2);m([t({type:Boolean})],p.prototype,"responsive",2);p=m([f("sbk-icon")],p);const E=y`
  :host {
    display: inline-block;
    --button__border--focus: var(--_button__border--focus , var(--sbkRoundButtonBorderOnLightFocus));

    --round-button__color: var(--_round-button__color, var(--sbkRoundButtonBgColorOnDarkEnabled));
    --round-button__color--active: var(--_round-button__color--active, var(--sbkRoundButtonBgColorOnDarkEnabled));
    --round-button__color--hover: var(--_round-button__color--hover , var(--sbkRoundButtonFgColorOnLightDefault));
    --round-button__color--focus: var(--_round-button__color--focus , var(--sbkRoundButtonBgColorOnDarkEnabled));
    --round-button__color--disabled: var(--_round-button__color--disabled , var(--sbkRoundButtonFgColorOnLightDisabled));
    --round-button__color--error: var(--_round-button__color--error, var(--sbkRoundButtonFgColorOnDarkDefault));
    --round-button-icon-only__color: var(--_round-button-icon-only__color, var(--sbkRoundButtonBgColorOnLightEnabled));

    --round-button__bg: var(--_round-button__bg , var(--sbkRoundButtonBgColorOnLightEnabled));
    --round-button__bg--active: var(--_round-button__bg--active , var(--sbkRoundButtonBgColorOnLightActive));
    --round-button__bg--hover: var(--_round-button__bg--hover , var(--sbkRoundButtonBgColorOnLightHover));
    --round-button__bg--focus: var(--_round-button__bg--focus , var(--sbkRoundButtonBgColorOnLightFocus));
    --round-button__bg--disabled: var(--_round-button__bg--disabled , var(--sbkRoundButtonBgColorOnLightDisabled));
    --round-button__bg--error: var(--_round-button__bg--error, var(--sbkRoundButtonBgColorOnLightError));
    --round-button-icon-only__bg: var(--_round-button-icon-only__bg, var(--sbkRoundButtonBgColorOnLightEnabledTransparent));

    --round-button__border-color: var(--_round-button__border-color, var(--sbkRoundButtonBorderOnLightMarked));
    --round-button__border-color--active: var(--_round-button__border-color--active, var(--sbkButtonBorderOnLightActive));
    --round-button__border-color--hover: var(--_round-button__border-color--hover, var(--sbkButtonBorderOnLightHover));
    --round-button__border-color--focus: var(--_round-button__border-color--focus, var(--sbkButtonBorderOnLightFocus));
    --round-button__border-color--disabled: var(--_secondary-button__border-color--disabled, var(--sbkButtonBorderOnLightDisabled));
    --round-button__border-color--error: var(--_secondary-button__border-color--error, var(--sbkButtonBorderOnLightDisabled));
}
  :host([hidden]) {
      display: none;
  }

  * {
    box-sizing: border-box;
  }

:host([alternativestyling]) {
  ${S}
}

.round-button {
  font: var(--sbkRoundButtonLabel);
  border: 2px solid transparent;
  border-radius: var(--sbkRoundButtonBorderRadiusBorderRadiusDefault);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 2px solid transparent;
  outline-offset: var(--sbkRoundButtonBorderRadiusBorderGapFocus);
  background-color: var(--round-button__bg);
  color: var(--round-button__color);
  text-decoration: none;
}

  @media (hover: hover) and (pointer: fine) {
  .round-button:hover:not([disabled]) {
    background-color: var(--round-button__bg--hover);
    border: var(--round-button__border-color--hover);
    color: var(--round-button__color--hover);
  }
}



  .round-button__icon-slot::slotted(div) {
    filter: brightness(0) saturate(100%) invert(16%) sepia(19%) saturate(7500%) hue-rotate(189deg) brightness(97%) contrast(104%);
  }

  @media (hover: hover) and (pointer: fine) {
    .round-button:hover .round-button__icon-slot::slotted(div) {
      filter: brightness(0) saturate(100%) invert(100%) sepia(15%) saturate(5522%) hue-rotate(209deg) brightness(120%) contrast(107%);
    }
  }

  .round-button:focus-visible:not(:active) {
    outline: var(--button__border--focus);
    background-color: var(--round-button__bg--focus);
    border: 2px solid transparent;
    color: var(--round-button__color--focus);
  }

  .round-button-extra-small {
    padding: var(--sbkRoundButtonSpacing3xs);
    height: 20px;//var(--sbkRoundButtonSizingMaxHeightExtraSmallIconOnly);
    width: 20px; //var(--sbkRoundButtonSizingMaxHeightExtraSmallIconOnly);
    &.round-button-icon-only {
      height: 20px; //var(--sbkRoundButtonSizingMaxHeightExtraSmallIconOnly);
      width: 20px; //var(--sbkRoundButtonSizingMaxHeightExtraSmallIconOnly);
    }
  }

  .round-button-small {
    padding: var(--sbkRoundButtonSpacing3xs);
    height: var(--sbkRoundButtonSizingMaxHeightSmall);
    width: var(--sbkRoundButtonSizingMaxHeightSmall);
    &.round-button-icon-only {
      height: var(--sbkRoundButtonSizingMaxHeightSmallIconOnly);
      width: var(--sbkRoundButtonSizingMaxHeightSmallIconOnly);
    }
  }

  .round-button-medium {
    padding: var(--sbkRoundButtonSpacing3xs);
    height: var(--sbkRoundButtonSizingMaxHeightMedium);
    width: var(--sbkRoundButtonSizingMaxHeightMedium);
    &.round-button-icon-only {
      height: var(--sbkRoundButtonSizingMaxHeightMediumIconOnly);
      width: var(--sbkRoundButtonSizingMaxHeightMediumIconOnly);
    }
  }

  .round-button-large {
    padding: var(--sbkRoundButtonSpacing2xs);
    height: var(--sbkRoundButtonSizingMaxHeightLarge);
    width: var(--sbkRoundButtonSizingMaxHeightLarge);
    &.round-button-icon-only {
      height: var(--sbkRoundButtonSizingMaxHeightLargeIconOnly);
      width: var(--sbkRoundButtonSizingMaxHeightLargeIconOnly);
    }
  }

  /* todo: Adjust roundbutton sizing tokens */
  .round-button-extra-large {
    padding: var(--sbkRoundButtonSpacing2xs);
    height: var(--sbkRoundButtonSizingMaxHeightLargeIconOnly);
    width: var(--sbkRoundButtonSizingMaxHeightLargeIconOnly);
  }

  .round-button-text, .round-button-icon-only {
    background-color: var(--round-button-icon-only__bg);
        color: var(--round-button-icon-only__color);
  }

  .round-button[disabled] {
      background-color: var(--round-button__bg--disabled);
      color: var(--round-button__color--disabled);
      cursor: not-allowed;
  }

    .round-button--error {
        background-color: var(--round-button__bg--error);
        color: var(--round-button__color--error);
    }

    .round-button--active, .round-button:active, .round-button:hover:active {
        background-color: var(--round-button__bg--active);
        border: var(--round-button__border-color--active);
        color: var(--round-button__color--active);
    }


`;var P=Object.defineProperty,j=Object.getOwnPropertyDescriptor,_=(r,o,s,i)=>{for(var n=i>1?void 0:i?j(o,s):o,d=r.length-1,u;d>=0;d--)(u=r[d])&&(n=(i?u(o,s,n):u(n))||n);return i&&n&&P(o,s,n),n};let b=class extends x{constructor(){super(),this.active=!1,this.disabled=!1,this.error=!1,this.href="",this.icon="",this.size="large",this.target="",this.value="",this.variant="default",this.type="button",this.isAjax=!1,this._internals=this.attachInternals()}static get styles(){return E}render(){return this.href?this.renderLink():this.renderButton()}renderButton(){return a`
      <button
          id="button"
          part="button"
            class="round-button round-button-${this.size} round-button-${this.variant}${this.error?" round-button--error":""}${this.active?" round-button--active":""}"
          aria-labelledby="button-label"
          type=${this.type}
          @click=${this.type==="submit"?this._handleSubmit:h}
          ?disabled=${this.disabled}>
        ${this.renderIcon()}
        <span id="button-label" ?hidden=${this.variant!=="text"}>
          <slot class="round-button__content"></slot>
        </span>
      </button>
    `}renderLink(){return a`
      <a ?id="link"
         part="link"
         class="round-button round-button-${this.size} round-button-${this.variant}${this.error?" round-button--error":""}${this.active?" round-button--active":""}"
         role="button"
         href=${this.href}
         ?title=${this.title}
         target=${this.target}
         ?disabled=${this.disabled}
         rel=${this.isAjax?"nofollow":h}
      >
        ${this.renderIcon()}
        <span id="button-label" ?hidden=${this.variant!=="text"}>
          <slot class="round-button__content"></slot>
        </span>
      </a>
    `}renderIcon(){return this.variant==="text"?a`${h}`:a`
      <slot class="round-button__icon-slot" name="icon">
        <div class="icon-wrapper" part="icon">
          <sbk-icon size=${this.getIconSize(this.size)} symbol=${this.icon}></sbk-icon>
        </div>
      </slot>
    `}getIconSize(r){switch(r){case"extra-small":return 16;case"small":return 20;case"medium":case"large":return 24;default:return 24}}_handleSubmit(){var o;const r=new CustomEvent("round-button-submit");this.dispatchEvent(r),(o=this._internals.form)==null||o.requestSubmit()}};b.formAssociated=!0;b.shadowRootOptions={...x.shadowRootOptions,delegatesFocus:!0};_([t({type:Boolean})],b.prototype,"active",2);_([t({type:Boolean})],b.prototype,"disabled",2);_([t({type:Boolean})],b.prototype,"error",2);_([t({type:String})],b.prototype,"href",2);_([t({type:String})],b.prototype,"icon",2);_([t()],b.prototype,"size",2);_([t()],b.prototype,"target",2);_([t({type:String})],b.prototype,"value",2);_([t()],b.prototype,"variant",2);_([t()],b.prototype,"type",2);_([t({type:Boolean,attribute:"is-ajax"})],b.prototype,"isAjax",2);b=_([f("sbk-round-button")],b);const e=B(`${C}`),A=B(`${L}`),X=y`
    :host {
        --link-border-focus: var(--_link-border-focus, var(--sbkLinkBorderOnLightFocus));
        --link-color: var(--_link-color, var(--sbkLinkFgColorOnLightEnabled));
        --link-color-hover: var(--_link-color-hover, var(--sbkLinkFgColorOnLightHover));
        --link-color-active: var(--_link-color-active, var(--sbkLinkFgColorOnLightActive));
        --link-color-disabled: var(--_link-color-disabled, var(--sbkLinkFgColorOnLightDisabled));
        --link-color-visited: var(--_link-color-visited, var(--sbkLinkFgColorOnLightVisited));
        --link-color-selected: var(--_link-color-selected, var(--sbkLinkFgColorOnLightSelected));
        box-sizing: border-box;
        display: inline-block;
    }

    div.link-wrapper {
        display: flex;
        align-items: center;
        @media all and (max-width: ${e}) {
            height: 100%;
        }
    }

    .link {
        display: flex;
        background-color: unset;
        gap: var(--sbkLinkSpacing4xs);
        align-items: center;
        outline: 2px solid transparent;
        outline-offset: var(--sbkLinkBorderGapFocus);
        border-radius: var(--sbkLinkBorderRadiusFocus);
        border: none;
        cursor: pointer;
        text-decoration: none;
        color: var(--link-color);
        fill: currentColor;
        padding: 0;
        font: inherit;

        overflow-wrap: break-word;
        word-wrap: break-word;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;
        hyphens: auto;

        &:not(.link--selected):visited {
            color: var(--link-color-visited);
        }

        &:not(.link--selected):active {
            color: var(--link-color-active);

            .link__text {
                text-decoration: underline;
            }
        }

        &:focus-visible {
            outline: var(--link-border-focus);
        }

        @media (hover: hover) and (pointer: fine) {
            &:not(.link--selected):hover {
                @media all and (min-width: ${A}) {
                    color: var(--link-color-hover);

                    .link__text {
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    .link--selected {
        color: var(--link-color-selected);
    }

    .link--disabled {
        color: var(--link-color-disabled);
        cursor: not-allowed;
        margin: 0;
        padding: 0;
        display: inline-block;
        outline: 2px solid transparent;
        outline-offset: var(--sbkLinkBorderGapFocus);
        border-radius: var(--sbkLinkBorderRadiusFocus);
        border: none;
        text-decoration: none;
        fill: currentColor;
    }

    .link-regular-bold {
        font-weight: 700;
    }

    .link-regular-2xs {
        font: var(--sbkLinkRegular2xs);
    }

    .link-regular-xs {
        font: var(--sbkLinkRegularXs);
    }

    .link-regular-sm {
        font: var(--sbkLinkRegularSm);
    }

    .link-regular-md {
        font: var(--sbkLinkRegularMd);
    }

    .link-icon-navigation-bold {
        font-weight: 700;

        .link__text {
            display: none;
            @media all and (max-width: ${e}) {
                display: block;
            }
        }

        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-icon-navigation-2xs {
        font: var(--sbkLinkRegular2xs);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }

        .link__text {
            display: none;
            @media all and (max-width: ${e}) {
                display: block;
            }
        }
    }

    .link-icon-navigation-xs {
        font: var(--sbkLinkRegularXs);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }

        .link__text {
            display: none;
            @media all and (max-width: ${e}) {
                display: block;
            }
        }
    }

    .link-icon-navigation-sm {
        font: var(--sbkLinkRegularSm);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }

        .link__text {
            display: none;
            @media all and (max-width: ${e}) {
                display: block;
            }
        }
    }

    .link-icon-navigation-md {
        font: var(--sbkLinkRegularMd);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }

        .link__text {
            display: none;
            @media all and (max-width: ${e}) {
                display: block;
            }
        }
    }

    .link-icon-navigation-bold-2xs {
        font: var(--sbkLinkBold2xs);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }

        .link__text {
            display: none;
            @media all and (max-width: ${e}) {
                display: block;
            }
        }
    }

    .link-icon-navigation-bold-xs {
        font: var(--sbkLinkBoldXs);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }

        .link__text {
            display: none;
            @media all and (max-width: ${e}) {
                display: block;
            }
        }
    }

    .link-icon-navigation-bold-sm {
        font: var(--sbkLinkBoldSm);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }

        .link__text {
            display: none;
            @media all and (max-width: ${e}) {
                display: block;
            }
        }
    }

    .link-icon-navigation-bold-md {
        font: var(--sbkLinkBoldMd);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }

        .link__text {
            display: none;
            @media all and (max-width: ${e}) {
                display: block;
            }
        }
    }

    .link-reduced-navigation-bold {
        font-weight: 700;
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-reduced-navigation-2xs {
        font: var(--sbkLinkRegular2xs);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-reduced-navigation-xs {
        font: var(--sbkLinkRegularXs);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-reduced-navigation-sm {
        font: var(--sbkLinkRegularSm);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-reduced-navigation-md {
        font: var(--sbkLinkRegularMd);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-reduced-navigation-bold-2xs {
        font: var(--sbkLinkBold2xs);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-reduced-navigation-bold-xs {
        font: var(--sbkLinkBoldXs);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-reduced-navigation-bold-sm {
        font: var(--sbkLinkBoldSm);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-reduced-navigation-bold-md {
        font: var(--sbkLinkBoldMd);
        @media all and (max-width: ${e}) {
            flex-direction: column;
        }
    }

    .link-navigation {
        justify-content: space-between;
        line-height: var(--sbkCoreLineHightDefaultLg);
    }

    .link-navigation-bold {
        font-weight: 700;
        justify-content: space-between;
        line-height: var(--sbkCoreLineHightDefaultLg);
    }

    .link-navigation-2xs {
        font: var(--sbkLinkRegular2xs);
        justify-content: space-between;
        line-height: var(--sbkCoreLineHightDefaultLg);
    }

    .link-navigation-xs {
        font: var(--sbkLinkRegularXs);
        justify-content: space-between;
        line-height: var(--sbkCoreLineHightDefaultLg);
    }

    .link-navigation-sm {
        font: var(--sbkLinkRegularSm);
        justify-content: space-between;
        line-height: var(--sbkCoreLineHightDefaultLg);
    }

    .link-navigation-md {
        font: var(--sbkLinkRegularMd);
        justify-content: space-between;
        line-height: var(--sbkCoreLineHightDefaultLg);
    }

    .link-underlined {
        .link__text {
            text-decoration: underline;
        }
    }

    .link-underlined-bold {
        text-decoration: underline;
        font-weight: 700;
    }

    .link-underlined-2xs {
        font: var(--sbkLinkUnderlined2xs);

        .link__text {
            text-decoration: underline;
        }
    }

    .link-underlined-xs {
        font: var(--sbkLinkUnderlinedXs);

        .link__text {
            text-decoration: underline;
        }
    }

    .link-underlined-sm {
        font: var(--sbkLinkUnderlinedSm);

        .link__text {
            text-decoration: underline;
        }
    }

    .link-underlined-md {
        font: var(--sbkLinkUnderlinedMd);

        .link__text {
            text-decoration: underline;
        }
    }

    .link-regular-bold-2xs {
        font: var(--sbkLinkBold2xs);
    }

    .link-regular-bold-xs {
        font: var(--sbkLinkBoldXs);
    }

    .link-regular-bold-sm {
        font: var(--sbkLinkBoldSm);
    }

    .link-regular-bold-md {
        font: var(--sbkLinkBoldMd);
    }

    .link-underlined-bold-xs {
        font: var(--sbkLinkBoldUnderlinedXs);

        .link__text {
            text-decoration: underline;
        }
    }

    .link-underlined-bold-sm {
        font: var(--sbkLinkBoldUnderlinedSm);

        .link__text {
            text-decoration: underline;
        }
    }

    .link-underlined-bold-md {
        font: var(--sbkLinkBoldUnderlinedMd);

        .link__text {
            text-decoration: underline;
        }
    }

    .link.link--noHyphens {
        hyphens: none;
        word-break: keep-all;
    }
`,T=y`

/* Special Styling for external Links in Typo3 */
    :host(.externalLink), :host(.externalLinkIcon) {
        div.link-wrapper {
            display: inline-block;
        }

        sbk-icon {
            display: inline-flex;
            position: relative;
            vertical-align: text-bottom;
        }

        .link {
            display: inline-block;
        }
    }
`;var U=Object.defineProperty,G=Object.getOwnPropertyDescriptor,g=(r,o,s,i)=>{for(var n=i>1?void 0:i?G(o,s):o,d=r.length-1,u;d>=0;d--)(u=r[d])&&(n=(i?u(o,s,n):u(n))||n);return i&&n&&U(o,s,n),n};let v=class extends x{constructor(){super(...arguments),this.disabled=!1,this.icon="",this.iconPosition="left",this.isBold=!1,this.href="",this.size="",this.target="",this.variant="underlined",this.isSelected=!1,this.hyphens="auto"}static get styles(){return[X,T]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.trackMatomo)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.trackMatomo)}render(){return a`
            <div class=${this.variant==="navigation"?"link-wrapper__navigation":"link-wrapper"}>
                ${this.disabled?this.renderDisabledAsText():this.href?this.renderLink():this.renderButton()}
            </div>
        `}renderLink(){return a`
            <a part="link" class="link link-${this.variant}${this.isBold?"-bold":""}${this.size?`-${this.size}`:""} ${this.isSelected?"link--selected":""} ${this.hyphens==="none"?"link--noHyphens":""}"
               href=${this.href}
               title=${this.title||h}
               target=${this.target||h}
            >
                ${k(this.icon&&this.iconPosition==="left",()=>this.renderIcon())}
                <span class="link__text">
                    <slot></slot>
                </span>
                ${k(this.icon&&this.iconPosition==="right",()=>this.renderIcon())}
            </a>
        `}renderButton(){return a`
            <button class="link link-${this.variant}${this.isBold?"-bold":""}${this.size?`-${this.size}`:""} ${this.isSelected?"link--selected":""} ${this.hyphens==="none"?"link--noHyphens":""}">
                ${k(this.icon&&this.iconPosition==="left",()=>this.renderIcon())}
                <span class="link__text">
                    <slot></slot>
                </span>
                ${k(this.icon&&this.iconPosition==="right",()=>this.renderIcon())}
            </button>
        `}renderDisabledAsText(){return a`
            <p class="link link--disabled link-${this.variant}-${this.isBold?"bold-":""}${this.size} ${this.hyphens==="none"?"link--noHyphens":""}">
                ${k(this.icon&&this.iconPosition==="left",()=>this.renderIcon())}
                <slot></slot>
                ${k(this.icon&&this.iconPosition==="right",()=>this.renderIcon())}
            </p>
        `}renderIcon(){return a`
            <sbk-icon size=${this.size==="xs"||this.size==="2xs"?20:24} symbol=${this.icon}></sbk-icon>`}trackMatomo(){this.href.match(/@sbk.org$/)!==null&&_paq.push(["trackGoal",12])}};g([t({type:Boolean})],v.prototype,"disabled",2);g([t()],v.prototype,"icon",2);g([t({attribute:"icon-position"})],v.prototype,"iconPosition",2);g([t({type:Boolean,attribute:"is-bold"})],v.prototype,"isBold",2);g([t()],v.prototype,"href",2);g([t()],v.prototype,"size",2);g([t()],v.prototype,"target",2);g([t()],v.prototype,"variant",2);g([t({type:Boolean,attribute:"is-selected"})],v.prototype,"isSelected",2);g([t()],v.prototype,"hyphens",2);v=g([f("sbk-link")],v);export{l as S,b as a,S as r};
//# sourceMappingURL=link-BqszdS6-.js.map