.ui-card {
  display: flex;
  flex-direction: column;
  background-color: var(--ui-color-surface);
  border: var(--ui-border-width) var(--ui-border-style) var(--ui-color-border);
}

.ui-card-header {
  padding: var(--ui-space-4) var(--ui-space-5);
  border-bottom: var(--ui-border-width) var(--ui-border-style) var(--ui-color-border);
}
.ui-card-header > *:first-child {
  margin-top: 0;
}
.ui-card-header > *:last-child {
  margin-bottom: 0;
}

.ui-card-body {
  padding: var(--ui-space-5);
  flex: 1;
}
.ui-card-body > *:first-child {
  margin-top: 0;
}
.ui-card-body > *:last-child {
  margin-bottom: 0;
}

.ui-card-footer {
  padding: var(--ui-space-4) var(--ui-space-5);
  border-top: var(--ui-border-width) var(--ui-border-style) var(--ui-color-border);
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
}

.ui-card-flat {
  border-color: transparent;
  background-color: var(--ui-color-base);
}