import {
  __decorateClass
} from "../../chunks/chunk.QU3DSPNU.js";
import { property } from "lit/decorators.js";
import { GdsElement } from "../../gds-element.js";
import { tokens } from "../../tokens.style.js";
import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
import {
  forColorTokens,
  forRadiusTokens,
  forSpaceTokens,
  parseColorValue
} from "../../utils/helpers/index.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import {
  withLayoutChildProps,
  withMarginProps,
  withPaddingProps,
  withPositioningProps,
  withSizeXProps,
  withSizeYProps
} from "../../utils/mixins/declarative-layout-mixins.js";
import DivStyles from "./div.styles.js";
let GdsDiv = class extends withSizeXProps(
  withSizeYProps(
    withMarginProps(
      withPaddingProps(withLayoutChildProps(withPositioningProps(GdsElement)))
    )
  )
) {
  constructor() {
    super(...arguments);
    this.level = "2";
  }
  render() {
    return html`<slot></slot>`;
  }
};
GdsDiv.styles = [tokens, DivStyles];
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "display", 2);
__decorateClass([
  property()
], GdsDiv.prototype, "level", 2);
__decorateClass([
  styleExpressionProperty(forColorTokens("content"))
], GdsDiv.prototype, "color", 2);
__decorateClass([
  styleExpressionProperty(forColorTokens("background"))
], GdsDiv.prototype, "background", 2);
__decorateClass([
  styleExpressionProperty({
    styleTemplate: function(_prop, values) {
      const this_ = this;
      const [
        size,
        style = this_["border-style"] || "solid",
        color = this_["border-color"] || "subtle-01"
      ] = values;
      const sizeCss = `var(--gds-sys-space-${size})`;
      const colorCss = parseColorValue(color, "border", this_.level);
      return `border: ${sizeCss} ${style} ${colorCss};`;
    }
  })
], GdsDiv.prototype, "border", 2);
__decorateClass([
  styleExpressionProperty(forColorTokens("border"))
], GdsDiv.prototype, "border-color", 2);
__decorateClass([
  styleExpressionProperty(forSpaceTokens)
], GdsDiv.prototype, "border-width", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "border-style", 2);
__decorateClass([
  styleExpressionProperty(forRadiusTokens)
], GdsDiv.prototype, "border-radius", 2);
__decorateClass([
  styleExpressionProperty({
    valueTemplate: (v) => `var(--gds-sys-shadow-${v}-01), var(--gds-sys-shadow-${v}-02)`
  })
], GdsDiv.prototype, "box-shadow", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "opacity", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "overflow", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "box-sizing", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "z-index", 2);
__decorateClass([
  styleExpressionProperty({
    styleTemplate: (_prop, values) => {
      const size = values[0];
      return `font: var(--gds-sys-text-${size});`;
    }
  })
], GdsDiv.prototype, "font", 2);
__decorateClass([
  styleExpressionProperty({
    valueTemplate: (v) => `var(--gds-sys-text-weight-${v})`
  })
], GdsDiv.prototype, "font-weight", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "text-align", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "text-wrap", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "overflow-wrap", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "white-space", 2);
__decorateClass([
  styleExpressionProperty({
    ...forSpaceTokens,
    styleTemplate: (_prop, values) => {
      const colGap = values[0];
      const rowGap = values[1] || colGap;
      return `gap: ${colGap} ${rowGap};`;
    },
    cacheOverrideKey: "flex"
  })
], GdsDiv.prototype, "gap", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "align-items", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "align-content", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "justify-content", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "justify-items", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "flex-direction", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "flex-wrap", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "place-items", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "place-content", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "aspect-ratio", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "cursor", 2);
__decorateClass([
  styleExpressionProperty()
], GdsDiv.prototype, "pointer-events", 2);
GdsDiv = __decorateClass([
  gdsCustomElement("gds-div")
], GdsDiv);
export {
  GdsDiv
};
