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

@customElement('arx-card')
export class StyledFieldset extends LitElement {
  static override styles = css`
    :host {
      display: block;
      background: var(--color-base-200);
      border-radius: var(--radius-box);
      box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
          calc(var(--depth) * 8px)
          oklch(from var(--color-base-content) l c h / 0.1),
        calc(var(--depth) * -2px) calc(var(--depth) * -2px)
          calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
      padding: 32px;
      margin-bottom: 32px;
      border: var(--border) solid var(--color-base-300);
      transition: all 0.3s ease;
      &:hover {
        box-shadow: calc(var(--depth) * 6px) calc(var(--depth) * 6px)
            calc(var(--depth) * 12px)
            oklch(from var(--color-base-content) l c h / 0.15),
          calc(var(--depth) * -3px) calc(var(--depth) * -3px)
            calc(var(--depth) * 8px)
            oklch(from var(--color-base-100) l c h / 0.7);
        transform: translateY(-2px);
      }
    }
  `;

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