<script>
/**
	A group of selectbox items
	
		<oreesh-selectbox style="width: 200px;">
			<oreesh-selectbox-group label="Fruits">
				<oreesh-selectbox-item>Apple</oreesh-selectbox-item>
				<oreesh-selectbox-item>Banana</oreesh-selectbox-item>
			</oreesh-selectbox-group>
			<oreesh-selectbox-group label="Vegetables">
				<oreesh-selectbox-item>Onion</oreesh-selectbox-item>
				<oreesh-selectbox-item>Carrot</oreesh-selectbox-item>
			</oreesh-selectbox-group>
		</oreesh-selectbox> 
		
	@class oreesh-selectbox-group
**/
/**
	Sets the label of the group
	
	@attribute label
**/
</script>

<dom-module id="oreesh-selectbox-group">
	<template>
		<style is="custom-style">
			:host {
				cursor: default;
			}

			:host .header {
				background-color: rgba(245, 245, 245, 1);
				border-bottom: 1px solid rgba(230, 230, 230, 1);
				border-top: 1px solid rgba(230, 230, 230, 1);
				color: rgba(158, 158, 158, 1);
				padding: 0.450em 0.556em;
			}
		</style>
		<div class="header">{{label}}</div>
		<div class="content">
			<content></content>
		</div>
	</template>
</dom-module>

<script>
	Polymer({
		is: 'oreesh-selectbox-group',
		properties: {
			label: {
				type: String,
				reflectToAttribute: true
			}
		},

		attached: function() {
			this.content = this.$$('.content');
			this.header = this.$$('.header');
		},

		getChildren: function() {
			return this.content.children;
		}
	});
</script>