"use strict";

import { LitElement, html, css } from "lit-element";

class Card extends LitElement {
	render() {
		return html`
			<slot></slot>
		`;
	}

	static get styles() {
		return css`
			:host {
				--mdc-theme-on-primary: white;
				--mdc-theme-primary: #43a047;
				--mdc-theme-on-secondary: white;
				--mdc-theme-secondary: #616161;
				user-select: none;
				background-color: #fff;
				margin-left: auto;
				margin-right: auto;
				width: 100%;
				overflow: hidden;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
			}
			@media (min-width: 600px) {
				:host {
					max-width: 450px;
					margin-top: 20px;
					border: none;
					border-radius: 4px;
					box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
				}
			}
		`;
	}
}

customElements.define("smarthome-card", Card);