/* Select | Combobox
 * And minor style for DateTextBox | MultiSelect
 *
 * Styling Select mainly includes:
 * 
 * 1. Containers
 *	Select:
 * 		.dijitSelect
 * 		.dijitButtonContents
 *	Combobox:
 *		.dijitComboBox
 *
 * 2. Arrow Button
 * 		.dijitArrowButton
 * 		.dijitArrowButtonInner
 *		.dijitComboBox .dijitButtonNode
 *
 * 3. Menu
 * 		.dijitSelectMenu
 * 
 * 4. States - Hover, Active, Focused, Disabled, e.g.
 *
 *	Select: Hover, Active, Focused, Disabled
 * 		.dijitSelectHover
 * 		.dijitSelectFocused
 * 		.dijitSelectDisabled
 *
 *	Combobox: Hover, Focused (Open), Disabled
 *		.dijitComboBox .dijitDownArrowButtonHover		
 *		.dijitComboBoxOpenHover .dijitButtonNode
 *		.dijitComboBoxDisabled .dijitButtonNode
 *
 */

@import 'dijit_form_variables';

.{$theme-name} {
		
	/* arrows */

	.dijitSelect,
	.dijitComboBox {
		.dijitArrowButtonInner {
			margin: 0;
			width:0;
			height: 0;
		}
	}

	/* ----- Select ----- */

	.dijitSelect {
		button-style();
		table-layout: fixed;

		.dijitButtonContents,
		.dijitArrowButton {
			line-height: 20px;
			padding: $button-padding;
			border: 0;
			border-radius: 0 $select-button-border-radius $select-button-border-radius 0;
		}
		.dijitButtonContents {
			padding:0;
			overflow: hidden;
			text-overflow: ellipsis;
			border-radius: $select-button-border-radius 0 0 $select-button-border-radius;
		}
		.dijitInputField {
			padding: 0 0 0 $input-padding*3;
		}
		.dijitArrowButton {
			width: $button-arrow-width;
			padding: $button-arrow-padding;
		}
	}

	/* hover */

	.dijitSelectHover {
		button-hover-style();
	}

	.dijitSelectActive {
		button-active-style();
	}

	/* focused */

	.dijitSelectFocused {
		border: $select-focus-border;
	}

	/* disabled */

	.dijitSelectDisabled {
		button-disabled-style();
	}

	/* ----- Combobox ----- */

	.dijitComboBox .dijitButtonNode {
		button-style();
		border-radius: 0 $select-button-border-radius $select-button-border-radius 0;
	}

	/* hover */

	.dijitComboBoxOpenHover .dijitButtonNode,
	.dijitComboBox .dijitDownArrowButtonHover {
		button-hover-style();
		box-shadow: none;
	}

	/* disabled */

	.dijitComboBoxDisabled .dijitButtonNode {
		button-disabled-style();
	}

	.dijitComboBox .dijitArrowButton {
		width: $button-arrow-width;
		padding: $button-arrow-padding;
	}

	// remove arrow when wrapped in a toolbar dijit
	.dijitToolbar .dijitComboBox .dijitArrowButtonInner {
		border: none;
	}

	/* -----  DateTextBox ----- */

	.dijitDateTextBox .dijitArrowButton:before {
		content: $select-date-icon;
	}
	/* -----  TimeTextBox ----- */

	.dijitTimeTextBox .dijitArrowButton:before {
		content: $select-time-icon;
	}

	/* ----- Multiple Select ----- */

	select  {
		padding: $input-padding 0;
		border: 1px solid $input-border-color;
		box-shadow: $shadow-depth1;
	}

	select option {
		padding: $input-padding $input-padding * 2;
	}

	/* Dropdown menu styles for "Select" 
	 * Most of menu styles are defined in Menu.styl 
	 */

	.dijitSelectMenu td.dijitMenuItemIconCell,
	.dijitSelectMenu td.dijitMenuArrowCell { 
		/* so that arrow and icon cells from MenuItem are not displayed */
		display: none;
	}
	
}