@import "../../styles/common";

$card-padding-y: $spacing-medium + $spacing-extra-small;
$card-padding-x: $spacing-medium + $spacing-small;

.card {
  background: $white;
  border: 1px solid $black-10;
  border-radius: $border-radius-3;
}

.cardHeader {
  border-bottom: 1px solid $black-10;
  padding: $card-padding-y $card-padding-x;
  display: flex;
}

.cardHeaderChildren {
  > h2,
  > h3,
  > h3 {
    margin: 0;
    line-height: $line-height-title;
  }
}

.cardHeaderActions {
  margin-left: auto;
  margin-top: -$card-padding-y;
  margin-bottom: -$card-padding-y;
  align-self: center;
}

.cardHeaderSpacing {
  margin-right: $spacing-small;
}

.cardBody {
  padding: $card-padding-y $card-padding-x;
}

.cardFooter {
  display: flex;
  flex-direction: row;
  padding: 0 $card-padding-x $card-padding-y;
}

.cardFooterSpacing {
  margin-right: $spacing-small;
}