.root {
	composes: mdc-card from '@material/card/dist/mdc.card.css';
	background: var(--mdc-raised-surface-background);
	color: var(--mdc-text-color);
	height: 100%;
	width: 100%;
}

.actions {
	composes: mdc-card__action from '@material/card/dist/mdc.card.css';
	padding: 1rem;
	padding-top: 0;
}

.actionButtons {
	composes: mdc-card__action-buttons from '@material/card/dist/mdc.card.css';
}

.actionIcons {
	composes: mdc-card__action-icons from '@material/card/dist/mdc.card.css';
	color: var(--mdc-text-color);
}

.primary {
	composes: mdc-card__primary-action from '@material/card/dist/mdc.card.css';
}

.content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.content:first-child {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

.contentWrapper {
	padding: 0 1rem 8px;
	color: var(--mdc-text-secondary-color);
	composes: mdc-typography mdc-typography--body2 from '@material/typography/dist/mdc.typography.css';
	height: 100%;
}

.textWrapper:first-child {
	padding-top: 16px;
}

.textWrapper:last-child {
	padding-bottom: 16px;
}

.header {
	display: flex;
	padding: 1rem;
}

.titleWrapper {
	padding: 0 1rem 8px;
	align-items: center;
}

.media {
	composes: mdc-card__media from '@material/card/dist/mdc.card.css';
	margin-bottom: 1rem;
}

.media:first-child {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

.mediaSquare::before {
	margin-top: 100%;
}

.media16by9::before {
	margin-top: 56.25%;
}

.mediaSquare::before {
	margin-top: 100%;
}

.media16by9::before {
	margin-top: 56.25%;
}

.media::before {
	display: block;
	content: '';
}

.title {
	composes: mdc-typography mdc-typography--headline6 from '@material/typography/dist/mdc.typography.css';
	margin-bottom: 0;
}

/* If the title isn't the first element it shouldn't have a margin */
.content:not(:first-child) .title,
.titleWrapper:not(:first-child) .title {
	margin-top: 0;
}

.subtitle {
	composes: mdc-typography mdc-typography--subtitle2 from '@material/typography/dist/mdc.typography.css';
	color: var(--mdc-text-secondary-color);
	margin: 0;
}

.outlined {
	composes: mdc-card--outlined from '@material/card/dist/mdc.card.css';
}
