import {
  __decorateClass
} from "../../chunks/chunk.QU3DSPNU.js";
import { css } from "lit";
import { tokens } from "../../tokens.style.js";
import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import { GdsDiv } from "../div/div.component.js";
let GdsCard = class extends GdsDiv {
  /// This sets variables that are used in the default styles. Any other SEPs will override.
  constructor() {
    super();
    this.variant = "primary";
    this.padding = "m;m{xl}";
    this["border-radius"] = "s";
    this["gap"] = "m;m{l}";
  }
  render() {
    return html`<slot></slot>`;
  }
};
GdsCard.styles = [
  tokens,
  css`
      :host {
        box-sizing: border-box;
        border-color: var(--_border-color);
        background-color: var(--_background-color);
        color: var(--_color);
        border-width: var(--gds-sys-space-5xs);
        border-style: solid;
        display: flex;
        flex-direction: column;
      }
    `
];
__decorateClass([
  styleExpressionProperty({
    styleTemplate: function(_prop, variant) {
      let border, background, color;
      switch (variant[0]) {
        case "primary":
          border = "transparent";
          background = `var(--gds-sys-color-l${this.level}-neutral-01)`;
          color = "var(--gds-sys-color-content-neutral-01)";
          break;
        case "secondary":
          border = "var(--gds-sys-color-border-subtle-01)";
          background = `var(--gds-sys-color-l${this.level}-neutral-02)`;
          color = "var(--gds-sys-color-content-neutral-01)";
          break;
        case "tertiary":
          border = "transparent";
          background = `var(--gds-sys-color-l${this.level}-neutral-02)`;
          color = "var(--gds-sys-color-content-neutral-01)";
          break;
        case "brand-01":
          border = "transparent";
          background = `var(--gds-sys-color-l${this.level}-brand-01)`;
          color = "var(--gds-sys-color-content-inversed)";
          break;
        case "brand-02":
          border = "transparent";
          background = `var(--gds-sys-color-l${this.level}-brand-02)`;
          color = "var(--gds-sys-color-content-brand-02)";
          break;
        case "positive":
        case "negative":
        case "warning":
        case "information":
        case "notice":
          border = `var(--gds-sys-color-border-${variant[0]}-02)`;
          background = `var(--gds-sys-color-l${this.level}-${variant[0]}-01)`;
          color = `var(--gds-sys-color-content-${variant[0]}-01)`;
          break;
        default:
          border = "transparent";
          background = `var(--gds-sys-color-l${this.level}-neutral-01)`;
          color = "var(--gds-sys-color-content-neutral-01)";
          break;
      }
      return `
      --_border-color: ${border};
      --_background-color: ${background};
      --_color: ${color};
      `;
    }
  })
], GdsCard.prototype, "variant", 2);
GdsCard = __decorateClass([
  gdsCustomElement("gds-card")
], GdsCard);
export {
  GdsCard
};
