import { __decorate } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.60.1_tslib@2.8.1_typescript@6.0.2/node_modules/tslib/tslib.es6.js';
import { css, LitElement, nothing, html } from 'lit';
import { property, customElement } from 'lit/decorators.js';
import { closeIcon } from '../icons/index.js';
import { createTranslator } from '@livepeer-frameworks/player-core';

let FwToast = class FwToast extends LitElement {
    constructor() {
        super(...arguments);
        this.message = "";
        this._defaultTranslator = createTranslator({ locale: "en" });
    }
    get _t() {
        return this.translator ?? this._defaultTranslator;
    }
    render() {
        if (!this.message)
            return nothing;
        return html `
      <div class="toast">
        <span>${this.message}</span>
        <button type="button" @click=${this._dismiss} aria-label=${this._t("dismiss")}>
          ${closeIcon()}
        </button>
      </div>
    `;
    }
    _dismiss() {
        this.dispatchEvent(new CustomEvent("fw-dismiss", { bubbles: true, composed: true }));
    }
};
FwToast.styles = css `
    :host {
      display: contents;
    }
    .toast {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 0.5rem;
      border: 1px solid rgb(255 255 255 / 0.1);
      background: rgb(0 0 0 / 0.8);
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      color: white;
      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
      backdrop-filter: blur(4px);
      animation: _fw-slide-up 200ms ease-out;
    }
    @keyframes _fw-slide-up {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    button {
      margin-left: 0.125rem;
      color: rgb(255 255 255 / 0.6);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      display: flex;
    }
    button:hover {
      color: white;
    }
  `;
__decorate([
    property({ type: String })
], FwToast.prototype, "message", void 0);
__decorate([
    property({ attribute: false })
], FwToast.prototype, "translator", void 0);
FwToast = __decorate([
    customElement("fw-toast")
], FwToast);

export { FwToast };
//# sourceMappingURL=fw-toast.js.map
