@include component-rules($petals--card-component-name) {
  padding:
    var($__petals--card-padding-y, $petals--card-padding-y)
    var($__petals--card-padding-x, $petals--card-padding-x);
  border:
    var($__petals--card-border-width, $petals--card-border-width) solid
    var($__petals--card-border-color, $petals--card-border-color);
  border-radius: var($__petals--card-border-radius, $petals--card-border-radius);
  background-color: var($__petals--card-bg, $petals--card-bg);
  box-shadow: var($__petals--card-box-shadow, $petals--card-box-shadow);

  &-body {
    padding:
      var($__petals--card-body-padding-y, $petals--card-body-padding-y)
      var($__petals--card-body-padding-x, $petals--card-body-padding-x);
  }

  &-footer {
    padding:
      var($__petals--card-footer-padding-y, $petals--card-footer-padding-y)
      var($__petals--card-footer-padding-x, $petals--card-footer-padding-x);
    border-top:
      var($__petals--card-footer-border-width, $petals--card-footer-border-width) solid
      var($__petals--card-footer-border-color, $petals--card-footer-border-color);
    border-bottom-right-radius: var($__petals--card-border-radius, $petals--card-border-radius);
    border-bottom-left-radius: var($__petals--card-border-radius, $petals--card-border-radius);
  }
}

@include component-rules($petals--card-header-component-name) {
  &:not(&--hasImage) {
    height: var($__petals--card-header-height, $petals--card-header-height);
    padding:
      var($__petals--card-header-padding-y, $petals--card-header-padding-y)
      var($__petals--card-header-padding-x, $petals--card-header-padding-x);
    border-bottom:
      var($__petals--card-header-border-width, $petals--card-header-border-width) solid
      var($__petals--card-header-border-color, $petals--card-header-border-color);
  }

  &-header,
  &-image {
    border-top-left-radius: var($__petals--card-border-radius, $petals--card-border-radius);
    border-top-right-radius: var($__petals--card-border-radius, $petals--card-border-radius);
  }

  &-title {
    font-size: var($__petals--card-header-font-size, $petals--card-header-font-size);
    font-weight: var($__petals--card-header-font-weight, $petals--card-header-font-weight);
    color: var($__petals--card-header-color, $petals--card-header-color);
    letter-spacing: var($__petals--card-header-letter-spacing, $petals--card-header-letter-spacing);
  }

  &--hasImage &-extra {
    flex-basis: 100%;
  }

  &-image {
    display: block;
    width: 100%;
  }
}