picocss/scss/components/_card.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "components/card") {
  /**
   * Card (<article>)
   */

  #{$parent-selector} article {
    margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
    padding: var(#{$css-var-prefix}block-spacing-vertical)
      var(#{$css-var-prefix}block-spacing-horizontal);
    border-radius: var(#{$css-var-prefix}border-radius);
    background: var(#{$css-var-prefix}card-background-color);
    box-shadow: var(#{$css-var-prefix}card-box-shadow);

    > header,
    > footer {
      margin-inline-end: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
      margin-inline-start: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
      padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
        var(#{$css-var-prefix}block-spacing-horizontal);
      background-color: var(#{$css-var-prefix}card-sectioning-background-color);
    }

    > header {
      margin-block-start: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
      margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
      border-block-end: var(#{$css-var-prefix}border-width)
        solid
        var(#{$css-var-prefix}card-border-color);
      border-end-start-radius: var(#{$css-var-prefix}border-radius);
      border-start-start-radius: var(#{$css-var-prefix}border-radius);
    }

    > footer {
      margin-block-start: var(#{$css-var-prefix}block-spacing-vertical);
      margin-block-end: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
      border-block-start: var(#{$css-var-prefix}border-width)
        solid
        var(#{$css-var-prefix}card-border-color);
      border-end-end-radius: var(#{$css-var-prefix}border-radius);
      border-start-end-radius: var(#{$css-var-prefix}border-radius);
    }
  }
}