'use strict';

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

const shared_tailwindElement_index = require('../../index-179a633e.cjs');
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
const index = require('../../index-1d3f4a5a.cjs');
require('../../bundle-mjs-d58a83c6.cjs');

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;
};
exports.LuksoDropdownOption = class LuksoDropdownOption extends shared_tailwindElement_index.TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.isReadonly = false;
    this.isDisabled = false;
    this.isSelected = false;
    this.isActive = false;
    this.isGroup = false;
    this.size = "medium";
    this.styles = index.ce({
      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-1 min-h-[28px]",
          medium: "paragraph-inter-14-regular rounded-8 px-2 min-h-[38px]"
        },
        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"
        },
        {
          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 shared_tailwindElement_index.x`<div class="${styles}">
      <slot></slot>
    </div>`;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-readonly" })
], exports.LuksoDropdownOption.prototype, "isReadonly", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-disabled" })
], exports.LuksoDropdownOption.prototype, "isDisabled", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-selected" })
], exports.LuksoDropdownOption.prototype, "isSelected", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-active" })
], exports.LuksoDropdownOption.prototype, "isActive", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-group" })
], exports.LuksoDropdownOption.prototype, "isGroup", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoDropdownOption.prototype, "size", 2);
exports.LuksoDropdownOption = __decorateClass([
  queryAssignedElements.e("lukso-dropdown-option")
], exports.LuksoDropdownOption);
