_card.scss

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

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

  #{$parent-selector} article:not(:has(> form:first-child)),
  #{$parent-selector} [role="article"]:not(:has(> form:first-child)),
  #{$parent-selector} article > form,
  #{$parent-selector} [role="article"] > form {
    margin-bottom: 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-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
      margin-left: 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-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
      margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
      border-bottom: var(#{$css-var-prefix}border-width)
        solid
        var(#{$css-var-prefix}card-border-color);
      border-top-right-radius: var(#{$css-var-prefix}border-radius);
      border-top-left-radius: var(#{$css-var-prefix}border-radius);

      > h1,
      > h2,
      > h3,
      > h4,
      > h5,
      > h6 {
        margin-bottom: 0;
      }

      > hgroup {
        > h1,
        > h2,
        > h3,
        > h4,
        > h5,
        > h6 {
          margin-bottom: 0;
        }
      }
    }

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

      // https://github.com/picocss/pico/issues/557#issuecomment-2393213110
      [type="submit"],
      [type="reset"],
      [type="button"],
      [role="group"],
      p,
      nav,
      ul,
      ol {
        margin-bottom: 0px;

        &:last-child {
          margin-bottom: 0px;
        }

        /* Also remove if next input after button is a hidden input */
        &:has(+ [type="hidden"]) {
          margin-bottom: 0px;
        }
      }
    }
  }
}