const template = document.createElement('template');

template.innerHTML = `
<style>
	#card {
		align-items: flex-start;
		background-color: var(--wc-card-background-color);
		border-radius: var(--wc-card-border-radius);
		box-shadow: var(--wc-card-box-shadow);
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		margin: var(--wc-card-margin);
		padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
		width: 100%;
	}
</style>

<div id="card" part="main">
	<slot></slot>
</div>
`

class card extends HTMLElement {
	constructor() {
		super();

		this._shadowRoot = this.attachShadow({ 'mode': 'open' });
		this._shadowRoot.appendChild(template.content.cloneNode(true));
	}
}

window.customElements.define('wc-card', card);