/* Toolbar 
 * 
 * Styling Toolbar means styling the toolbar container and the widget inside toolbar  (dijitToolbar)
 * 
 * 1. toolbar (default styling): 
 * 		.dijitToolbar - styles for outer container
 *
 * 2. widget inside toolbar
 * 		.dijitToolbar .dijitButtonNode   - Button widget
 * 					  .dijitComboButton  - ComboButton widget
 * 					  .dijitDropDownButton  - DropDownButton widget
 * 					  .dijitToggleButton  - ToggleButton widget
 * 		
 * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside)
 * 			.dijitToolbar .dijitButtonNodeHover  - styles for hovered Button widget
 * 
 * 4. actived widget inside toolbar (ie, mouse down on the widget inside)
 * 			.dijitToolbar .dijitButtonNodeActive  - mouse down on Button widget
 */
.dijitToolbar {
  background: #f5f5f5;
  padding: 4px;
  zoom: 1;
/* Override default button styles */
/* Hover */
/*
	.dijitComboButtonHover {
		.dijitButtonNode,
		.dijitDownArrowButton {
		}

		.dijitButtonNodeHover,
		.dijitDownArrowButtonHover {
		}
	}
	*/
/* Active */
/* Toggle button checked status */
}
.dijitToolbar label {
  padding: 8px;
}
.dijitToolbar .dijitToggleButton,
.dijitToolbar .dijitButton,
.dijitToolbar .dijitDropDownButton,
.dijitToolbar .dijitComboButton {
  margin-right: 4px;
}
.dijitToolbar .dijitButton .dijitButtonNode,
.dijitToolbar .dijitDropDownButton .dijitButtonNode,
.dijitToolbar .dijitComboButton .dijitButtonNode,
.dijitToolbar .dijitToggleButton .dijitButtonNode,
.dijitToolbar .dijitComboBox .dijitButtonNode {
  border: 1px solid transparent;
  padding: 4px;
  background: transparent;
  border-radius: 2px;
  box-shadow: none;
  transition-property: background-color;
  transition-duration: 0.3s;
}
.dijitToolbar .dijitComboButton .dijitStretch {
/* no rounded border on side adjacent to arrow */
  border-radius: 2px 0 0 2px;
}
.dijitToolbar .dijitComboButton .dijitArrowButton {
/* no rounded border on side adjacent to button */
  border-radius: 0 2px 2px 0;
}
.dijitToolbar .dijitComboBox .dijitButtonNode {
  padding: 0 8px;
}
.dijitToolbar .dijitComboBox .dijitInputInner {
  padding: 0;
}
.dijitToolbar .dijitDropDownButton .dijitArrowButtonInner {
  margin-left: 4px;
}
.dijitToolbar .dijitButtonHover .dijitButtonNode,
.dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
.dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
.dijitToolbar .dijitComboButtonHover .dijitButtonNode {
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  transition: all 0.1s;
  background: #e1e1e1;
  background: linear-gradient(#f6f6f6, #e1e1e1);
  border: 1px solid #d0d0d0;
}
.dijitToolbar .dijitButtonActive .dijitButtonNode,
.dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
.dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
  transition: none;
  outline: none;
  background: #d0d0d0;
  background: linear-gradient(#f5f5f5, #f5f5f5);
  border: 1px solid #d0d0d0;
}
.dijitToolbar .dijitToggleButtonChecked .dijitButtonNode {
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
  transition: none;
  outline: none;
  background: #d0d0d0;
  background: linear-gradient(#f5f5f5, #f5f5f5);
  border: 1px solid #d0d0d0;
}
/* Separator */
.dijitToolbarSeparator {
  width: 1px;
  height: 20px;
  background: #d0d0d0;
  padding: 0;
  margin: 0 4px;
}
/* Toolbar inside of disabled Editor */
.dijitDisabled .dijitToolbar {
  background: $disabled-background-color;
  border-bottom: 1px solid #d0d0d0;
}