pico/scss/components/_card.scss

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

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

  article {
    margin-bottom: var(#{$✨}block-spacing-vertical);
    padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
    border-radius: var(#{$✨}border-radius);
    background: var(#{$✨}card-background-color);
    box-shadow: var(#{$✨}card-box-shadow);

    > header,
    > footer {
      margin-right: calc(var(#{$✨}block-spacing-horizontal) * -1);
      margin-left: calc(var(#{$✨}block-spacing-horizontal) * -1);
      padding: calc(var(#{$✨}block-spacing-vertical) * 0.66) var(#{$✨}block-spacing-horizontal);
      background-color: var(#{$✨}card-sectionning-background-color);
    }

    > header {
      margin-top: calc(var(#{$✨}block-spacing-vertical) * -1);
      margin-bottom: var(#{$✨}block-spacing-vertical);
      border-bottom: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
      border-top-right-radius: var(#{$✨}border-radius);
      border-top-left-radius: var(#{$✨}border-radius);
    }

    > footer {
      margin-top: var(#{$✨}block-spacing-vertical);
      margin-bottom: calc(var(#{$✨}block-spacing-vertical) * -1);
      border-top: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
      border-bottom-right-radius: var(#{$✨}border-radius);
      border-bottom-left-radius: var(#{$✨}border-radius);
    }
  }
}