import {
  __decorateClass
} from "../../chunks/chunk.QU3DSPNU.js";
import { html } from "lit/static-html.js";
import { tokens } from "../../tokens.style.js";
import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
import { parseColorValue } from "../../utils/helpers/index.js";
import { gdsCustomElement } from "../../utils/helpers/custom-element-scoping.js";
import { GdsFlex } from "../flex/flex.component.js";
import MaskStyles from "./mask.styles.js";
let GdsMask = class extends GdsFlex {
  constructor() {
    super();
    this["mask-size"] = "cover";
    this["mask-repeat"] = "no-repeat";
    this["mask-position"] = "center";
    this.position = "relative";
    this.display = "flex";
    this.inset = "0";
  }
  render() {
    return html`<div part="mask"></div>
      <slot></slot>`;
  }
};
GdsMask.styles = [tokens, MaskStyles];
__decorateClass([
  styleExpressionProperty({
    selector: '[part="mask"]',
    valueTemplate: function(value) {
      const this_ = this;
      return parseColorValue(value, "background", this_.level);
    }
  })
], GdsMask.prototype, "background", 2);
__decorateClass([
  styleExpressionProperty({
    valueTemplate: (v) => {
      const [direction] = v.split("/");
      return `linear-gradient(to ${direction}, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%)`;
    },
    selector: '[part="mask"]'
  })
], GdsMask.prototype, "mask-image", 2);
__decorateClass([
  styleExpressionProperty({
    valueTemplate: (v) => v,
    selector: '[part="mask"]'
  })
], GdsMask.prototype, "mask-size", 2);
__decorateClass([
  styleExpressionProperty({
    valueTemplate: (v) => v,
    selector: '[part="mask"]'
  })
], GdsMask.prototype, "mask-repeat", 2);
__decorateClass([
  styleExpressionProperty({
    valueTemplate: (v) => v,
    selector: '[part="mask"]'
  })
], GdsMask.prototype, "mask-position", 2);
__decorateClass([
  styleExpressionProperty({
    valueTemplate: (v) => v,
    selector: '[part="mask"]'
  })
], GdsMask.prototype, "backdrop-filter", 2);
GdsMask = __decorateClass([
  gdsCustomElement("gds-mask")
], GdsMask);
export {
  GdsMask
};
