@fylgja/card/index.css

The Fylgja card component

.card {
  position: relative;
  background-color: var(--card-bg, color-mix(in oklab, var(--root-bg) 88%, white));
  color: var(--card-color, var(--root-fg));
  border: 1px solid var(--card-stroke, color-mix(in oklab, var(--root-bg) 88%, var(--root-fg)));
  border-radius: var(--card-radius, 1rem);
  box-shadow: var(--card-shadow, none);
  transition: scale 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, var(--outline-transition);
  overflow: clip;
}

.card-content {
  margin-block: 0;
}

:is(.card-content,
.card > :where(figcaption),
.card:where(:not(img, video, iframe, figure, picture, :has(.card-content)))) {
  padding-block: var(--card-padding, var(--card-py, 1.25rem));
  padding-inline: var(--card-padding, var(--card-px, 1.25rem));
}
:is(.card-content,
.card > :where(figcaption),
.card:where(:not(img, video, iframe, figure, picture, :has(.card-content)))) > :first-child {
  margin-block-start: 0;
}
:is(.card-content,
.card > :where(figcaption),
.card:where(:not(img, video, iframe, figure, picture, :has(.card-content)))) > :last-child {
  margin-block-end: 0;
}

.card:where(.--elevated) {
  --card-shadow: var(--shadow-2);
  --card-stroke: transparent;
}

@media (any-pointer: fine) {
  .card:where(.--hover):hover {
    --card-shadow: var(--shadow-4);
  }
}