@universal-material/web/card/card.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    display: block;
    position: relative;
    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));
  }

  :host([variant=elevated]) {
    --u-current-bg-color: var(--u-card-elevated-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
    background-color: var(--u-current-bg-color);
  }
  :host([variant=elevated]) u-elevation {
    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);
  }

  :host([variant=filled]) {
    --u-current-bg-color: var(--u-card-filled-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));
    background-color: var(--u-current-bg-color);
  }

  :host([variant=outlined]) {
    --u-current-bg-color: var(--u-card-outlined-bg-color, var(--u-color-surface, rgb(254, 247, 255)));
    background-color: var(--u-current-bg-color);
    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));
  }

  u-card-content,
  slot {
    border-radius: inherit;
  }
`;
//# sourceMappingURL=card.styles.js.map