var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { cssReset } from '../utils/css-reset.js';
import './play-icon/play-icon.js';
let PlayListItem = class PlayListItem extends LitElement {
    constructor() {
        super(...arguments);
        this.label = '';
    }
    render() {
        return html `
      <li>
        ${this.icon &&
            html `<play-icon size="20px" icon=${this.icon}></play-icon>`}
        ${this.label}
        ${this.endIcon &&
            html `<play-icon size="20px" icon=${this.endIcon}></play-icon>`}
      </li>
    `;
    }
};
PlayListItem.styles = css `
    ${cssReset}

    li {
      display: flex;
      flex-direction: row;
      column-gap: 14px;
      padding-top: 14px;
      padding-right: 16px;
      padding-bottom: 14px;
      padding-left: 22px;
      font-family: var(--font-family-sans);
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      cursor: pointer;
      background-color: var(--color-neutral-background);
      white-space: nowrap;
    }

    li:hover {
      background-color: var(--color-neutral-background-hovered);
      color: var(--color-secondary-foreground);
    }
  `;
__decorate([
    property()
], PlayListItem.prototype, "label", void 0);
__decorate([
    property()
], PlayListItem.prototype, "icon", void 0);
__decorate([
    property()
], PlayListItem.prototype, "endIcon", void 0);
PlayListItem = __decorate([
    customElement('play-list-item')
], PlayListItem);
export { PlayListItem };
//# sourceMappingURL=play-list-item.js.map