import { r as d, c as n, h as e, H as c, g as l } from "./index.61732cef.js";
import { c as h } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const u = () => ':host{display:contents}:host *{box-sizing:border-box}.card{position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--translucent{background-color:transparent}.card--translucent:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}@media print{.card{overflow:visible;height:auto;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content}.card__body{min-height:auto;flex-grow:0}.card__content{min-height:auto}}', g = ["xs", "sm", "base", "l", "xl"], f = class {
  constructor(a) {
    d(this, a), this.componentLoad = n(this, "componentLoad", 7), this.as = "div", this.borderRadius = "base", this.elevationLevel = 3, this.intent = "default", this.justifyContent = "start", this.flashing = !1;
  }
  async flash(a = 5e3) {
    Boolean(this.flashingTimeout) && (clearTimeout(this.flashingTimeout), this.flashingTimeout = void 0), this.flashing = !0, this.flashingTimeout = setTimeout(() => {
      this.flashing = !1;
    }, a);
  }
  componentDidLoad() {
    this.componentLoad.emit();
  }
  render() {
    const a = Boolean(this.href) ? "a" : this.as, t = Boolean(this.el.querySelector('[slot="floating-controls"]')), r = Boolean(this.el.querySelector('[slot="image"]')), i = {
      ...this.customBackgroundColor ? { "--swirl-card-background-default": this.customBackgroundColor } : {},
      backdropFilter: this.customBackdropFilter,
      borderRadius: g.includes(this.borderRadius) ? `var(--s-border-radius-${this.borderRadius})` : this.borderRadius,
      height: this.height,
      minHeight: this.minHeight,
      overflow: this.overflow
    }, s = {
      padding: Boolean(this.padding) ? `var(--s-space-${this.padding})` : void 0,
      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0,
      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0
    }, o = h("card", `card--elevation-level-${this.elevationLevel}`, `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
      "card--elevated": this.elevated,
      "card--flashing": this.flashing,
      "card--has-floating-controls": t,
      "card--has-image": r,
      "card--highlighted": this.highlighted,
      "card--interactive": this.interactive || this.href,
      "card--translucent": this.translucent,
      "card--is--borderless": this.isBorderless
    });
    return e(c, { key: "5d3e28cd329ea9312db055ec26603471b2769b5f", styles: { height: this.height } }, e(a, { key: "1a0a88412a4c09d94dc26216a0d1508d2c7e1e9c", "aria-current": this.swirlAriaCurrent, "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: o, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank" ? "noreferrer" : void 0, style: i, target: this.linkTarget }, e("div", { key: "19531ee30d16e58045cf88cb2a2c131840361832", class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, e("slot", { key: "1ceb9d2bdad0fcd627f6d9729d12cedac0439083", name: "image" })), e("div", { key: "5c4da7197a80d912a12358e324a1be859ee0db7d", class: "card__floating-controls" }, e("slot", { key: "8fbaada621865c95bfddbc9c54e18721afbbe969", name: "floating-controls" })), e("div", { key: "dd5daf282b659d12c10de972420eb07cc5c58f81", class: "card__body", style: s }, e("div", { key: "964a2d0f76da2ef99e73223c5682c196235b89c1", class: "card__content" }, e("slot", { key: "eaf859000c7414ba1780d7c3dda62675570ab204", name: "content" })))));
  }
  get el() {
    return l(this);
  }
};
f.style = u();
export {
  f as swirl_card
};
