'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b7293b2f.js');
const theme = require('./theme-1ac31ccf.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) {
    index.registerInstance(this, hostRef);
    /**
     * If `true`, the card header will be translucent.
     */
    this.translucent = false;
  }
  hostData() {
    return {
      class: Object.assign(Object.assign({}, theme.createColorClasses(this.color)), { 'card-header-translucent': this.translucent })
    };
  }
  __stencil_render() {
    return index.h("slot", null);
  }
  render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
};
CardHeader.style = cardHeaderCss;

exports.lu_card_header = CardHeader;

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