.wb-stretched::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.wb-stretched__container {
  position: relative;
}















































:host {
  display: inline;
}

:host([button]) {
  display: inline-block;
}

.wb-link {
  color: var(--wb-link__color, var(--wb-ds-link__color, var(--wb-ds-color-text--default)));
  font-family: var(--wb-link__font-family);
  font-size: var(--wb-link__font-size);
  font-style: var(--wb-link__font-style);
  font-weight: var(--wb-link__font-weight);
  line-height: var(--wb-link__line-height);
  letter-spacing: var(--wb-link__letter-spacing);
  text-transform: var(--wb-link__text-transform);
  text-align: var(--wb-link__text-align);
  opacity: var(--wb-link__opacity);
  padding-top: var(--wb-link__bezel-top, var(--wb-link__bezel, var(--wb-ds-link__bezel-top, var(--wb-ds-link__bezel, 0))));
  padding-right: var(--wb-link__bezel-right, var(--wb-link__bezel, var(--wb-ds-link__bezel-right, var(--wb-ds-link__bezel, 0))));
  padding-bottom: var(--wb-link__bezel-bottom, var(--wb-link__bezel, var(--wb-ds-link__bezel-bottom, var(--wb-ds-link__bezel, 0))));
  padding-left: var(--wb-link__bezel-left, var(--wb-link__bezel, var(--wb-ds-link__bezel-left, var(--wb-ds-link__bezel, 0))));
  --wb-link__box-shadow--value: var(--wb-link__box-shadow, var(--wb-ds-border-is-box-shadow));
  --wb-link__border-width--value: var(--wb-link__border-width, var(--wb-ds-link__border-width, 0));
  --wb-link__border-color--value: var(--wb-link__border-color, var(--wb-ds-link__border-color, transparent));
  --wb-link__blur-radius--value: var(--wb-link__blur-radius, var(--wb-ds-border-blur-radius--default, 0));
  --wb-link__spread-radius--value: var(--wb-link__spread-radius, var(--wb-ds-border-spread-radius--default, 0));
  --wb-link__box-shadow-top--value: var(--wb-link__box-shadow-top, inset 0px var(--wb-link__border-width--value) var(--wb-link__blur-radius--value) var(--wb-link__spread-radius--value) var(--wb-link__border-color--value));
  --wb-link__box-shadow-right--value: var(--wb-link__box-shadow-right, inset calc(var(--wb-link__border-width--value) * -1) 0px var(--wb-link__blur-radius--value) var(--wb-link__spread-radius--value) var(--wb-link__border-color--value));
  --wb-link__box-shadow-bottom--value: var(--wb-link__box-shadow-bottom, inset 0px calc(var(--wb-link__border-width--value) * -1) var(--wb-link__blur-radius--value) var(--wb-link__spread-radius--value) var(--wb-link__border-color--value));
  --wb-link__box-shadow-left--value: var(--wb-link__box-shadow-left, inset var(--wb-link__border-width--value) 0px var(--wb-link__blur-radius--value) var(--wb-link__spread-radius--value) var(--wb-link__border-color--value));
  box-shadow: var(--wb-link__box-shadow--value, var(--wb-link__box-shadow-left--value), var(--wb-link__box-shadow-right--value), var(--wb-link__box-shadow-top--value), var(--wb-link__box-shadow-bottom--value));
  border-top: var(--wb-link__border-top, var(--wb-link__border, var(--wb-ds-border-is-border)));
  border-right: var(--wb-link__border-right, var(--wb-link__border, var(--wb-ds-border-is-border)));
  border-bottom: var(--wb-link__border-bottom, var(--wb-link__border, var(--wb-ds-border-is-border)));
  border-left: var(--wb-link__border-left, var(--wb-link__border, var(--wb-ds-border-is-border)));
  border-radius: var(--wb-link__border-radius, var(--wb-ds-link__border-radius, 0));
  outline: var(--wb-link__outline, var(--wb-ds-border-is-outline));
  transition: var(--wb-link__transition, color var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), opacity var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function));
  background: var(--wb-link__background, var(--wb-ds-link__background, transparent));
  text-decoration: var(--wb-link__text-decoration, var(--wb-ds-link__text-decoration, none));
  cursor: var(--wb-link__cursor, var(--wb-ds-link__cursor, pointer));
  width: var(--wb-link__width);
}
.wb-link slot[name=end] {
  margin-left: var(--wb-link__gutter-x, var(--wb-ds-link__gutter-x));
}
.wb-link * {
  --wb-link__bezel: initial;
  --wb-link__bezel-top: initial;
  --wb-link__bezel-right: initial;
  --wb-link__bezel-bottom: initial;
  --wb-link__bezel-left: initial;
}
.wb-link * {
  --wb-link__border-color: initial;
  --wb-link__border-radius: initial;
  --wb-link__border-width: initial;
  --wb-link__box-shadow: initial;
  --wb-link__box-shadow-top: initial;
  --wb-link__box-shadow-right: initial;
  --wb-link__box-shadow-bottom: initial;
  --wb-link__box-shadow-left: initial;
  --wb-link__border: initial;
  --wb-link__border-top: initial;
  --wb-link__border-right: initial;
  --wb-link__border-bottom: initial;
  --wb-link__border-left: initial;
  --wb-link__outline: initial;
  --wb-link__transition: initial;
}
.wb-link * {
  --wb-link__background: initial;
}
.wb-link--stretched::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
.wb-link--disabled {
  pointer-events: none;
  cursor: default;
}
.wb-link--button {
  --wb-link__color: var(--wb-button__color, var(--wb-ds-button__color, var(--wb-ds-color-text--default)));
  --wb-link__font-family: var(--wb-button__font-family);
  --wb-link__font-size: var(--wb-button__font-size);
  --wb-link__font-style: var(--wb-button__font-style);
  --wb-link__font-weight: var(--wb-button__font-weight);
  --wb-link__line-height: var(--wb-button__line-height);
  --wb-link__letter-spacing: var(--wb-button__letter-spacing);
  --wb-link__text-transform: var(--wb-button__text-transform);
  --wb-link__text-align: var(--wb-button__text-align);
  --wb-link__opacity: var(--wb-button__opacity);
  --wb-link__bezel-top: var(--wb-button__bezel-top, var(--wb-button__bezel, var(--wb-ds-button__bezel-top, var(--wb-ds-button__bezel))));
  --wb-link__bezel-right: var(--wb-button__bezel-right, var(--wb-button__bezel, var(--wb-ds-button__bezel-right, var(--wb-ds-button__bezel))));
  --wb-link__bezel-bottom: var(--wb-button__bezel-bottom, var(--wb-button__bezel, var(--wb-ds-button__bezel-bottom, var(--wb-ds-button__bezel))));
  --wb-link__bezel-left: var(--wb-button__bezel-left, var(--wb-button__bezel, var(--wb-ds-button__bezel-left, var(--wb-ds-button__bezel))));
  --wb-link__border-color: var(--wb-button__border-color, var(--wb-ds-button__border-color, var(--wb-ds-color-border--default)));
  --wb-link__border-radius: var(--wb-button__border-radius, var(--wb-ds-button__border-radius, var(--wb-ds-border-radius--default)));
  --wb-link__border-width: var(--wb-button__border-width, var(--wb-ds-button__border-width, var(--wb-ds-border-width--default)));
  --wb-link__box-shadow: var(--wb-button__box-shadow);
  --wb-link__box-shadow-top: var(--wb-button__box-shadow-top);
  --wb-link__box-shadow-right: var(--wb-button__box-shadow-right);
  --wb-link__box-shadow-bottom: var(--wb-button__box-shadow-bottom);
  --wb-link__box-shadow-left: var(--wb-button__box-shadow-left);
  --wb-link__border: var(--wb-button__border);
  --wb-link__border-top: var(--wb-button__border-top);
  --wb-link__border-right: var(--wb-button__border-right);
  --wb-link__border-bottom: var(--wb-button__border-bottom);
  --wb-link__border-left: var(--wb-button__border-left);
  --wb-link__outline: var(--wb-button__outline);
  --wb-link__transition: background var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), color var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), box-shadow var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), border var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function);
  --wb-link__background: var(--wb-button__background, var(--wb-ds-button__background, var(--wb-ds-color-background--default)));
  --wb-link__text-decoration: var(--wb-button__text-decoration, var(--wb-ds-button__text-decoration, none));
  --wb-link__cursor: var(--wb-button__cursor, var(--wb-ds-button__cursor, pointer));
  --wb-link__width: var(--wb-button__width);
  display: inline-block;
}


:export {
  props: color, font-family, font-size, font-style, font-weight, line-height, letter-spacing, text-transform, text-align, opacity, bezel-top, bezel-right, bezel-bottom, bezel-left, border-color, border-radius, border-width, box-shadow, box-shadow-top, box-shadow-right, box-shadow-bottom, box-shadow-left, border, border-top, border-right, border-bottom, border-left, outline, transition, background, text-decoration, cursor, width;
  stateProps: color, font-style, font-weight, opacity, border-color, border-width, transition, box-shadow, border, border-top, border-right, border-bottom, border-left, background, text-decoration, cursor;
}
/* === mchweb overrides for wb-link === */
/* mchweb overrides for wb-link — concatenated into served link.css at build time.
   Mirrors mchweb-theme/src/webbloqs-theme.scss:563-589 (wb-link)
   and the shared wb-link[button] portion from :591-710 (was wb-button, wb-link[button]). */

:host {
    display: block;

    --wb-ds-icon__fill: var(--wb-link__color, var(--wb-ds-link__color));
    --wb-layout__gutter-width: var(--wb-ds-space--xs);
    --wb-layout__gutter-height: 0;
}

/* wb-link[button] — host-level vars from the shared "wb-button, wb-link[button]" block. */
:host([button]) {
    --wb-ds-icon__fill: var(--wb-button__color, var(--wb-ds-button__color));
    --wb-ds-grid__gutter-x: 0;
    --wb-ds-grid__gutter-y: 0;
    --wb-ds-border-is-border: var(--wb-ds-button__border-width) var(--wb-ds-button__border-style)
        var(--wb-button__border-color, var(--wb-ds-button__border-color));
}

:host([button][kind="clear"]) {
    --wb-ds-icon__fill: var(--wb-ds-button-clear__icon-fill);
    --wb-ds-button__color: var(--wb-ds-color-text);
    --wb-ds-button__border-color: transparent;
    --wb-ds-button__bezel-top: 0;
    --wb-ds-button__bezel-right: 0;
    --wb-ds-button__bezel-bottom: 0;
    --wb-ds-button__bezel-left: 0;
}

:host([button][kind="primary"]) {
    --wb-ds-button__border-width: 0;
    --wb-ds-button__background: var(--wb-ds-color-primary--default);
    --wb-ds-button__color: var(--wb-ds-color-gray--white);
}

:host([button][kind="secondary"]) {
    --wb-ds-button__border-width: 0;
    --wb-ds-button__background: var(--wb-ds-color-secondary--dark);
    --wb-ds-button__color: var(--wb-ds-color-gray--white);
}

:host([button][kind="warnlevel"]) {
    --wb-ds-button__border-width: 0;
    --wb-ds-button__background: var(--wb-ds-color-secondary--2x-light);
    --wb-ds-button__color: var(--wb-ds-color-secondary--3x-dark);
    --wb-ds-button__border-radius: var(--wb-ds-border-radius--2x-large);
}

:host([button][kind="icon"]) {
    --wb-ds-button__background: var(--wb-ds-color-gray--white);
    --wb-ds-button__color: var(--wb-ds-color-gray--light);
    --wb-ds-button__border-color: var(--wb-ds-color-gray--x-light);
    --wb-ds-button__bezel-top: var(--wb-ds-space--2xs);
    --wb-ds-button__bezel-right: var(--wb-ds-space--2xs);
    --wb-ds-button__bezel-bottom: var(--wb-ds-space--2xs);
    --wb-ds-button__bezel-left: var(--wb-ds-space--2xs);
}

:host .wb-link {
    display: block;
}

:host .wb-link:hover,
:host .wb-link:focus,
:host .wb-link:active {
    --wb-link__color: var(--wb-link__color--hover, var(--wb-ds-color-primary--dark));
    --wb-link__opacity: var(--wb-link__opacity--hover, var(--wb-link__opacity));
    --wb-icon__fill: var(--wb-icon__fill--hover, var(--wb-link__color, var(--wb-ds-link__color)));
}

:host .wb-link:focus-visible {
    --wb-link__outline: var(--wb-ds-border-width--x-thick) solid var(--wb-ds-color-border--focus);

    outline-offset: calc(var(--wb-ds-border-width--x-thick) * -1);
}

/* wb-link[button] — when wb-link renders as a button (shares the wb-button block). */
:host([button]) .wb-button:hover,
:host([button]) .wb-button:focus,
:host([button]) .wb-button:active {
    --wb-button__border-color: var(--wb-button__border-color--hover, var(--wb-ds-color-border--hover));
    --wb-button__color: var(--wb-button__color--hover, var(--wb-ds-color-text--hover));
    --wb-icon__fill: var(--wb-icon__fill--hover, var(--wb-button__color, var(--wb-ds-button__color)));
}

:host([button]) .wb-button:focus-visible {
    --wb-button__outline: var(--wb-ds-border-width--x-thick) solid var(--wb-ds-color-border--focus);

    outline-offset: calc(var(--wb-ds-border-width--x-thick) * -1);
}

:host([button]) .wb-button[disabled] {
    --wb-button__opacity: 0.25;

    pointer-events: none;
}

/* kind variants (rewrite of "wb-link[button][kind=...] .wb-button ..." via the bridge) */
:host([button][kind="clear"]) .wb-button:hover,
:host([button][kind="clear"]) .wb-button:focus,
:host([button][kind="clear"]) .wb-button:active {
    --wb-button__color: var(--wb-button__color--hover, var(--wb-ds-color-text--hover));
    --wb-button__border-color: var(--wb-button__border-color--hover, transparent);
}

:host([button][kind="primary"]) .wb-button:hover,
:host([button][kind="primary"]) .wb-button:focus,
:host([button][kind="primary"]) .wb-button:active {
    --wb-button__background: var(--wb-ds-color-primary--dark);
    --wb-button__color: var(--wb-button__color--hover, var(--wb-ds-color-gray--white));
}

:host([button][kind="secondary"]) .wb-button:hover,
:host([button][kind="secondary"]) .wb-button:focus,
:host([button][kind="secondary"]) .wb-button:active {
    --wb-button__background: var(--wb-ds-color-secondary--dark);
    --wb-button__color: var(--wb-button__color--hover, var(--wb-ds-color-secondary--2x-light));
}

:host([button][kind="warnlevel"]) .wb-button:hover,
:host([button][kind="warnlevel"]) .wb-button:focus,
:host([button][kind="warnlevel"]) .wb-button:active {
    --wb-button__background: var(--wb-button__background--hover, var(--wb-ds-button__background));
    --wb-button__color: var(--wb-button__color--hover, var(--wb-ds-button__color));
}

:host([button][kind="icon"]) .wb-button:hover,
:host([button][kind="icon"]) .wb-button:focus,
:host([button][kind="icon"]) .wb-button:active {
    --wb-button__background: var(--wb-button__background--hover, var(--wb-ds-color-gray--white));
    --wb-button__color: var(--wb-button__color--hover, var(--wb-ds-color-gray--dark));
    --wb-button__border-color: var(--wb-button__border-color--hover, var(--wb-ds-color-gray--dark));
}