.card {
    composes: cos-card -v-text -v-border-apparent from global;
    border-width: var(--border);
    border-style: solid;
    border-radius: var(--rounded-md);
}

.header {
    padding: var(--padding-sm) var(--padding-md);
}

.header-title {
    flex-grow: 1;
}

.header-extra {
    flex-shrink: 0;
}

.content:first-child,
.footer:first-child {
    padding-top: var(--padding-sm);
}

.content, .footer {
    padding: 0 var(--padding-md) var(--padding-sm);
}

.action {
    padding: var(--padding-sm) var(--padding-md);
}