import { r as registerInstance, h, H as Host } from './index-442cf464.js';
import { c as createColorClasses } from './theme-a8bb96f5.js';

const cardHeaderCss = ":host{padding:16px;display:flex;position:relative;flex-flow:column;background:var(--background);color:var(--color)}:host(.lu-color){background:var(--lu-color-base);color:var(--lu-color-contrast)}:host(.lu-color) ::slotted(lu-card-title),:host(.lu-color) ::slotted(lu-card-image){color:currentColor}:host(.card-header-translucent){background-color:rgba(var(--lu-background-color-rgb, 255, 255, 255), 0.9);backdrop-filter:saturate(180%) blur(30px)}";

const CardHeader = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * If `true`, the card header will be translucent.
     */
    this.translucent = false;
  }
  hostData() {
    return {
      class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'card-header-translucent': this.translucent })
    };
  }
  __stencil_render() {
    return h("slot", null);
  }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
CardHeader.style = cardHeaderCss;

export { CardHeader as lu_card_header };

//# sourceMappingURL=lu-card-header.entry.js.map