<script>import { BEM } from "../../models/BEM";
import Title from "./Title.svelte";
export let isBody = true;
export let headerBorder = false;
export let title = '';
const bm = new BEM('UI-CardList', {
    'UI-CardList--isBody': isBody
});
bm.append($$props.class);
</script>
<div class={bm.toString()} style={$$props.style} class:headerBorder class:isBody>
	{#if title}
		<header>
			<Title {title}></Title>
		</header>
	{/if}
	<div class="UI-CardList__content">
		<slot></slot>
	</div>
	{#if $$slots.footer}
		<footer>
			<slot name="footer">

			</slot>
		</footer>
	{/if}
</div>
<style>.UI-CardList {
  background: var(--ui-white);
  color: #495057;
  box-shadow: var(--ui-raised);
  border-radius: 6px;
}
.UI-CardList header {
  padding: 20px;
}
.UI-CardList header :global(.UI-Title) {
  margin: 0;
}
.UI-CardList.headerBorder header {
  border-bottom: 1px solid gainsboro;
}
.UI-CardList__content :global(> *:not(:first-child)) {
  border-top: 1px solid gainsboro;
}
.UI-CardList.isBody .UI-CardList__content :global(> *) {
  padding: 15px;
  margin: 0;
}</style>
