:host {
  /**
   * @prop --background: Background of the card
   * @prop --color: Color of the card
   */
  --lu-safe-area-left: 0px;
  --lu-safe-area-right: 0px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  padding: 16px;
  display: block;
  position: relative;
  transform: translateZ(0);
  background: var(--background);
  color: var(--color);
  font-family: var(--lu-font-family, inherit);
  overflow: hidden;
}

:host(.lu-color) {
  background: var(--lu-color-base);
  color: var(--lu-color-contrast);
}

:host(.lu-color)::slotted(*) lu-card-header,
:host(.lu-color)::slotted(*) lu-card-buttons,
:host(.lu-color)::slotted(*) lu-card-button,
:host(.lu-color)::slotted(*) lu-card-footer,
:host(.lu-color)::slotted(*) lu-card-title {
  background: var(--lu-color-base);
  color: var(--lu-color-contrast);
}