import { T as TailwindStyledElement, x } from '../../index-2f5488b6.js';
import { n, e } from '../../query-assigned-elements-5d94572f.js';
import { o } from '../../style-map-88b4d8ad.js';
import { c as customClassMap } from '../../index-5e194caf.js';
import '../../directive-2bb7789e.js';

const style = ":host {\n    display: inline-flex\n}";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let LuksoTag = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.size = "small";
    this.isRounded = false;
    this.backgroundColor = "";
    this.textColor = "";
    this.defaultStyles = `inline-flex items-center justify-center border border-neutral-20 text-neutral-20`;
    this.extraSmallStyles = `font-inter text-8 font-500 leading-20 h-[20px]`;
    this.smallStyles = `paragraph-inter-12-medium h-[28px]`;
    this.largeStyles = `paragraph-inter-14-medium h-[34px]`;
  }
  padding() {
    if (this.size === "x-small" && !this.isRounded) {
      return "px-1";
    }
    if (this.size === "small" && this.isRounded) {
      return "px-3";
    }
    if (this.size === "large") {
      return "px-4";
    }
    return "px-2";
  }
  render() {
    return x`
      <div
        data-testid="tag"
        class=${customClassMap({
      [this.defaultStyles]: true,
      [this.padding()]: true,
      ["rounded-[56px]"]: this.isRounded,
      ["rounded-8"]: !this.isRounded && this.size !== "x-small",
      ["rounded-4"]: !this.isRounded && this.size === "x-small",
      [this.extraSmallStyles]: this.size === "x-small",
      [this.smallStyles]: this.size === "small",
      [this.largeStyles]: this.size === "large"
    })}
        style=${o({
      backgroundColor: `var(--${this.backgroundColor})`,
      borderColor: `var(--${this.backgroundColor})`,
      color: `var(--${this.textColor})`
    })}
      >
        <slot></slot>
      </div>
    `;
  }
};
__decorateClass([
  n({ type: String })
], LuksoTag.prototype, "size", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-rounded" })
], LuksoTag.prototype, "isRounded", 2);
__decorateClass([
  n({ type: String, attribute: "background-color" })
], LuksoTag.prototype, "backgroundColor", 2);
__decorateClass([
  n({ type: String, attribute: "text-color" })
], LuksoTag.prototype, "textColor", 2);
LuksoTag = __decorateClass([
  e("lukso-tag")
], LuksoTag);

export { LuksoTag };
