'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const lit = require('lit');
const decorators_js = require('lit/decorators.js');
const tailwindVariants = require('tailwind-variants');
const safeCustomElement = require('../../shared/safe-custom-element.cjs');
require('../../shared/directives/custom-class-map/index.cjs');
const index$1 = require('../../shared/directives/custom-style-map/index.cjs');
const index = require('../../shared/tailwind-element/index.cjs');
const style = require('./style.css.cjs');

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;
};
exports.LuksoTag = class LuksoTag extends index.TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.size = "small";
    this.isRounded = false;
    this.backgroundColor = "";
    this.borderColor = "";
    this.textColor = "";
    this.tagStyles = tailwindVariants.tv({
      base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
      variants: {
        size: {
          "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
          small: "paragraph-inter-12-medium h-7 px-2 rounded-8",
          large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
        },
        isRounded: {
          true: "rounded-[56px]"
        }
      },
      compoundVariants: [
        {
          size: "small",
          isRounded: true,
          class: "px-3"
        },
        {
          size: "x-small",
          isRounded: true,
          class: "px-2"
        }
      ]
    });
  }
  resolveBorderColor() {
    if (this.borderColor) {
      return this.borderColor;
    }
    if (this.backgroundColor) {
      return this.backgroundColor;
    }
  }
  render() {
    const tagStyles = this.tagStyles({
      size: this.size,
      isRounded: this.isRounded
    });
    return lit.html`
      <div
        data-testid="tag"
        class=${tagStyles}
        style=${index$1.customStyleMap({
      [`background-color: var(--${this.backgroundColor})`]: !!this.backgroundColor,
      [`border-color: var(--${this.resolveBorderColor()})`]: !!this.resolveBorderColor(),
      [`color: var(--${this.textColor})`]: !!this.textColor
    })}
      >
        <slot></slot>
      </div>
    `;
  }
};
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoTag.prototype, "size", 2);
__decorateClass([
  decorators_js.property({ type: Boolean, attribute: "is-rounded" })
], exports.LuksoTag.prototype, "isRounded", 2);
__decorateClass([
  decorators_js.property({ type: String, attribute: "background-color" })
], exports.LuksoTag.prototype, "backgroundColor", 2);
__decorateClass([
  decorators_js.property({ type: String, attribute: "border-color" })
], exports.LuksoTag.prototype, "borderColor", 2);
__decorateClass([
  decorators_js.property({ type: String, attribute: "text-color" })
], exports.LuksoTag.prototype, "textColor", 2);
exports.LuksoTag = __decorateClass([
  safeCustomElement.safeCustomElement("lukso-tag")
], exports.LuksoTag);
