@use 'sass:map';

@mixin bui-card($color-config) {
	$bui-card-header-text-color: var(--bui-card-header-text-color, #19315b);
	$bui-card-header-background-color: var(--bui-card-header-background-color, #fafafa);

	@if map.get($color-config, 'is-dark') {
		$bui-card-header-text-color: var(--bui-card-header-text-color-dark-theme, white);
		$bui-card-header-background-color: var(--bui-card-header-background-color-dark-theme, inherit);
	}

	.bui-card-flat.mat-mdc-card,
	.bui-card-shaded.mat-mdc-card {
		border-radius: 4px;
		display: flex;
		flex-direction: column;

		.mat-mdc-card-header {
			padding: 16px;

			.mat-mdc-card-title {
				font-size: 16px;
				color: $bui-card-header-text-color;
				margin-bottom: 0;
			}

			.mat-mdc-card-title + .mat-mdc-card-subtitle {
				margin-top: 0;
				margin-bottom: 0;
			}
		}

		.mat-mdc-card-content {
			flex: 1;
		}

		.mat-mdc-card-header + .mat-mdc-card-content {
			padding-top: 16px;
		}
	}

	.bui-card-flat.mat-mdc-card {
		box-shadow: none;
		border: 1px solid #e0e0e0;

		.mat-mdc-card-header {
			border-bottom: 1px solid #e0e0e0;
		}
	}

	.bui-card-shaded.mat-mdc-card {
		.mat-mdc-card-header {
			background: $bui-card-header-background-color;
		}
	}
}