:host {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: calc(4 * var(--spacing-unit));
  border-radius: var(--corner-radius);
  --card-background: var(--color-elevated-item-background);
  background: var(--card-background);
  color: var(--card-text-color);
  /* Tint */
  /* Children */
}
:host.clipped {
  overflow-y: auto;
}
:host.inline {
  display: inline-flex;
}
:host.leaned {
  margin: 0;
}
:host.leaned-sides {
  margin-left: 0;
  margin-right: 0;
}
:host.body-leaned > .content {
  padding: 0;
  border-radius: var(--corner-radius);
}
:host.elevated-1 {
  box-shadow: 0 2px 8px rgba(var(--color-elevated-item-shadow), 0.1);
}
:host.elevated-2 {
  box-shadow: 0 3px 16px rgba(var(--color-elevated-item-shadow), 0.14);
}
:host.elevated-3 {
  box-shadow: 0 6px 24px rgba(var(--color-elevated-item-shadow), 0.18), 0 0px 10px rgba(var(--color-elevated-item-shadow), 0.05);
}
:host.outlined {
  box-shadow: 0 0 0 1px var(--color-border) inset;
}
:host.neutral:not(.selectable) {
  --card-background: var(--color-neutral);
  --card-text-color: var(--color-neutral-lightest);
}
:host.primary:not(.selectable) {
  --card-background: var(--color-primary);
  --card-text-color: var(--color-primary-lightest);
}
:host.secondary:not(.selectable) {
  --card-background: var(--color-secondary);
  --card-text-color: var(--color-secondary-lightest);
}
:host.warning:not(.selectable) {
  --card-background: var(--color-warning);
  --card-text-color: var(--color-warning-lightest);
}
:host.danger:not(.selectable) {
  --card-background: var(--color-danger);
  --card-text-color: var(--color-danger-lightest);
}
:host.selectable {
  --card-select-border-color: var(--color-primary);
  --card-select-background-color: var(--color-primary-lightest);
  cursor: pointer;
  transition: box-shadow 0.3s, background-color 0.3s;
}
:host.selectable:hover {
  box-shadow: 0 0 0 2px var(--card-select-border-color) inset;
}
:host.selectable.selected {
  box-shadow: 0 0 0 2px var(--card-select-border-color) inset;
  background-color: var(--card-select-background-color);
}
:host.selectable.neutral {
  --card-select-border-color: var(--color-neutral);
  --card-select-background-color: var(--color-neutral-lightest);
}
:host.selectable.primary {
  --card-select-border-color: var(--color-primary);
  --card-select-background-color: var(--color-primary-lightest);
}
:host.selectable.secondary {
  --card-select-border-color: var(--color-secondary);
  --card-select-background-color: var(--color-secondary-lightest);
}
:host.selectable.warning {
  --card-select-border-color: var(--color-warning);
  --card-select-background-color: var(--color-warning-lightest);
}
:host.selectable.danger {
  --card-select-border-color: var(--color-danger);
  --card-select-background-color: var(--color-danger-lightest);
}
:host h1, :host h2, :host h3, :host h4, :host h5 {
  color: var(--card-text-color) !important;
}
:host .content {
  padding: calc(4 * var(--spacing-unit));
  flex: 1;
}
:host .content:empty {
  padding: calc(2 * var(--spacing-unit));
}