: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);
}