import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('card-backdrop')
export class CardBackdrop extends LitElement {
  static styles = css`
    :host {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background:
        radial-gradient(
          ellipse at 30% 20%,
          color-mix(in srgb, var(--color-accent) 15%, transparent) 0%,
          transparent 50%
        ),
        radial-gradient(
          ellipse at 70% 80%,
          color-mix(in srgb, var(--color-accent) 10%, transparent) 0%,
          transparent 50%
        ),
        var(--color-bg);
      padding: 1.5rem;
    }
  `;

  render() {
    return html`<slot></slot>`;
  }
}