import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { tv } from 'tailwind-variants';
import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';

const style = ":host {\n    display: block\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 LuksoDropdownOption = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.isReadonly = false;
    this.isDisabled = false;
    this.isSelected = false;
    this.isActive = false;
    this.isGroup = false;
    this.size = "large";
    this.styles = tv({
      base: `text-neutral-20 cursor-pointer select-none
      whitespace-nowrap flex items-center truncate gap-2`,
      variants: {
        isSelected: {
          true: "bg-neutral-95"
        },
        isActive: {
          true: "bg-neutral-98"
        },
        isGroup: {
          true: ""
        },
        size: {
          small: "paragraph-inter-12-regular rounded-4 px-2 min-h-7",
          medium: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
          large: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
          "x-large": ""
        },
        isDisabled: {
          true: "opacity-60 cursor-not-allowed"
        },
        isReadonly: {
          true: "cursor-not-allowed",
          false: "hover:bg-neutral-98"
        }
      },
      compoundVariants: [
        {
          isGroup: true,
          size: "small",
          class: "pl-3"
        },
        {
          isGroup: true,
          size: "medium",
          class: "pl-4"
        },
        {
          isGroup: true,
          size: "large",
          class: "pl-4"
        },
        {
          isReadonly: false,
          isSelected: true,
          class: "hover:bg-neutral-95"
        }
      ]
    });
  }
  render() {
    const styles = this.styles({
      isSelected: this.isSelected,
      isActive: this.isActive,
      size: this.size,
      isGroup: this.isGroup,
      isDisabled: this.isDisabled,
      isReadonly: this.isReadonly
    });
    return html`<div class="${styles}">
      <slot></slot>
    </div>`;
  }
};
__decorateClass([
  property({ type: Boolean, attribute: "is-readonly" })
], LuksoDropdownOption.prototype, "isReadonly", 2);
__decorateClass([
  property({ type: Boolean, attribute: "is-disabled" })
], LuksoDropdownOption.prototype, "isDisabled", 2);
__decorateClass([
  property({ type: Boolean, attribute: "is-selected" })
], LuksoDropdownOption.prototype, "isSelected", 2);
__decorateClass([
  property({ type: Boolean, attribute: "is-active" })
], LuksoDropdownOption.prototype, "isActive", 2);
__decorateClass([
  property({ type: Boolean, attribute: "is-group" })
], LuksoDropdownOption.prototype, "isGroup", 2);
__decorateClass([
  property({ type: String })
], LuksoDropdownOption.prototype, "size", 2);
LuksoDropdownOption = __decorateClass([
  safeCustomElement("lukso-dropdown-option")
], LuksoDropdownOption);

export { LuksoDropdownOption };
