/* TabContainer 
 * 
 * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
 * 
 * Tab List: (including 4 kinds of tab location)
 * 		.dijitTabContainerTop-tabs     - tablist container at top
 * 		.dijitTabContainerBottom-tabs  - tablist container at bottom
 * 		.dijitTabContainerLeft-tabs    - tablist container at left
 * 		.dijitTabContainerRight-tabs   - tablist container at right
 * 
 * Tab Strip Button:
 * 		.dijitTabStripIcon - tab strip button icon
 * 		.dijitTabStripMenuIcon - down arrow icon position
 * 		.dijitTabStripSlideLeftIcon - left arrow icon position
 * 		.dijitTabStripSlideRightIcon - right arrow icon position
 * 
 * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
 * 
 * Tab Button:
 * 		.dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
 * 		.dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
 * 		.dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
 * 		.dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
 * 
 * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
 * 				- styles for selected status of top tab button
 * 		same to Bottom, Left, Right Tabs
 * 
 * 		.dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
 * 		.dijitTabActive .dijitTab  - styles when mouse down on tab buttons
 * 		.dijitTabChecked .dijitTab  - styles when on buttons of selected tab
 * 
 * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
 * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
 * 		.dijitTabCloseButtonActive - styles when mouse down on close action button
 * 
 * Tab Button: (checked status)
 * 
 * Tab Content Container:
 * 		.dijitTabContainerTop-dijitContentPane
 * 		.dijitTabContainerBottom-dijitContentPane
 * 		.dijitTabContainerLeft-dijitContentPane
 * 		.dijitTabContainerRight-dijitContentPane - for background and padding
 * 
 * Nested Tabs:
 * 		.dijitTabContainerNested - Container for nested tabs
 * 		.dijitTabContainerTabListNested - tab list container for nested tabs
 */

@import 'dijit_layout_variables';

.{$theme-name} {

	/************ common styles *************/

	.dijitTabContainer {
		border-radius: $tab-wrapper-border-radius;
	}

	.dijitTabPaneWrapper {
		background: $tab-wrapper-background-color;
		border: 1px solid $tab-wrapper-border-color;
		margin: 0;
		padding: 0;
		border-radius: 0 0 $tab-wrapper-border-radius $tab-wrapper-border-radius;
	}

	.dijitTabContainerTop-tabs,
	.dijitTabContainerBottom-tabs,
	.dijitTabContainerLeft-tabs,
	.dijitTabContainerRight-tabs {
		border: none;
	}

	.dijitTabSpacer {
		// display: none if !$tab-has-gutter;
		display: none;
	}

	/* tabs */

	.dijitTab {
		border: 1px solid $tab-border-color;
		background-color: $tab-background-color;
		text-align: center;
		transition-property: background, padding, margin;
		transition-duration: .2s;
		transition-timing-function: ease;
		position: relative;
		z-index: 0;
		if ($tab-checked-has-highlight-border) {
			&:before {
				content: "";
				display: block;
				position: absolute;
			}
		}
	}

	/* tabs: hover */

	.dijitTabHover {
		background-color: $tab-hover-background-color;
	}

	/* tabs: active */

	.dijitTabActive {
		background-color: $tab-active-background-color;
	}

	/* tabs: checked */

	.dijitTabChecked {
		border: 1px solid $tab-checked-border-color;
		z-index: 1;
		&.dijitTabHover,
		&.dijitTabActive {
			border: 1px solid $tab-checked-border-color;
			background-color: $tab-checked-background-color;
			color: $tab-checked-text-color;
		}
	}

	/* tabs: disabled */

	.dijitTabDisabled {
		opacity: $disabled-opacity;
	}

	/* tabs: strip button */

	.tabStripButton {
		background-color: transparent;
		border: none;
	}

	/* tabs: close button */

	.dijitTabCloseButton {
		_icon-core-style();
		line-height: 1;
		font-size: 1em;
		vertical-align: middle;
		margin-left: $tab-padding;
		opacity: $tab-close-button-opacity;
		&:before {
			content: $tab-close-button-icon;
		}
	}
	.dijitTabCloseButtonHover {
		opacity: $tab-close-button-hover-opacity;
	}
	.dijitTabCloseButtonActive {
		opacity: $tab-close-button-active-opacity;
	}

	/************* end common **************/


	/*************** top tabs ***************/

	.dijitTabContainerTop-tabs {
		.dijitTab {
			margin-right: $tab-spacing;
			padding: $tab-top-padding;
			border-bottom-color: $tab-wrapper-border-color;
			border-left: none;
			border-right: none;
		}
		// .dijitTabHover,
		// .dijitTabActive,
		// .dijitTabChecked {
		// }
		.dijitTabChecked {
			border-bottom: 1px solid $tab-wrapper-background-color;
			border-left: 1px solid $tab-wrapper-border-color;
			border-right: 1px solid $tab-wrapper-border-color;
			if ($tab-checked-has-highlight-border) {
				&:before {
					height: 3px;
					background: $tab-highlight-color;
					top: -1px;
					left: -1px;
					right: -1px;
				}
			}
		}
	}

	.dijitTabListContainer-top {
		margin-top: 1px;
		.dijitTab {
			top:0;
		}
	}

	/*************** end top tabs **************/

	/*************** bottom tabs ***************/

	.dijitTabPaneWrapper.dijitTabContainerBottom-container {
		border-radius: $tab-wrapper-border-radius $tab-wrapper-border-radius 0 0;
	}

	.dijitTabContainerBottom-tabs {
		.dijitTab {
			margin-right: $tab-spacing;
			padding: $tab-bottom-padding;
			border-top-color: $tab-wrapper-border-color;
			border-left: none;
			border-right: none;
		}
		// .dijitTabHover,
		// .dijitTabActive,
		// .dijitTabChecked {
		// }
		.dijitTabChecked {
			border-top: 1px solid $tab-wrapper-background-color;
			border-left: 1px solid $tab-wrapper-border-color;
			border-right: 1px solid $tab-wrapper-border-color;
			if ($tab-checked-has-highlight-border) {
				&:before {
					height: 3px;
					background: $tab-highlight-color;
					bottom: -1px;
					left: -1px;
					right: -1px;
				}
			}
		}
	}

	.dijitTabListContainer-bottom {
		margin-top: -1px;
		.dijitTab {
			top: 0;
		}
	}

	/************ end bottom tabs ************/

	/*************** left tabs ***************/

	.dijitTabPaneWrapper.dijitTabContainerLeft-container {
		border-radius: 0 $tab-wrapper-border-radius $tab-wrapper-border-radius 0;
	}

	.dijitTabContainerLeft-tabs {
		.dijitTab {
			margin-bottom: $tab-spacing;
			padding: $tab-left-padding;
			border-right-color: $tab-wrapper-border-color;
			border-top: none;
			border-bottom: none;
		}
		// .dijitTabHover,
		// .dijitTabActive,
		// .dijitTabChecked {
		// }
		.dijitTabChecked {
			border-right: 1px solid $tab-wrapper-background-color;
			border-top: 1px solid $tab-wrapper-border-color;
			border-bottom: 1px solid $tab-wrapper-border-color;
			if ($tab-checked-has-highlight-border) {
				&:before {
					width: 3px;
					background: $tab-highlight-color;
					bottom: -1px;
					left: -1px;
					top: -1px;
				}
			}
		}
	}

	/************** end left tabs *************/

	/*************** right tabs ***************/

	.dijitTabPaneWrapper.dijitTabContainerRight-container{
		border-radius: $tab-wrapper-border-radius 0 0 $tab-wrapper-border-radius
	 }

	.dijitTabContainerRight-tabs {
		 .dijitTab {
			margin-bottom: $tab-spacing;
			padding: $tab-right-padding;
			border-left-color: $tab-wrapper-border-color;
			border-top: none;
			border-bottom: none;
		}
		// .dijitTabHover,
		// .dijitTabActive,
		// .dijitTabChecked {
		// }
		.dijitTabChecked {
			border-left: 1px solid $tab-wrapper-background-color;
			border-top: 1px solid $tab-wrapper-border-color;
			border-bottom: 1px solid $tab-wrapper-border-color;
			if ($tab-checked-has-highlight-border) {
				&:before {
					width: 3px;
					background: $tab-highlight-color;
					bottom: -1px;
					right: -1px;
					top: -1px;
				}
			}
		}
	}

	/************* end right tabs *************/

	/************ left/right scroll buttons + menu button ***********/
	.tabStripButton {
		background-color: $tab-strip-button-background-color;
		border: 1px solid $tab-strip-button-border-color;
		transition-property: background-color;
	}

	.dijitTabListContainer-top ,
	.dijitTabListContainer-bottom {
		.tabStripButton {
			padding: $tab-padding $tab-padding*2;
			margin-left: $tab-spacing;
			margin-right $tab-spacing;
		}
	}

	.dijitTabListContainer-top {
		.tabStripButton {
			margin-bottom: 1px;
		}
	}

	.dijitTabListContainer-bottom {
		.tabStripButton {
			margin-top: 1px;
		}
	}

	.tabStripButtonHover {
		background-color: $tab-strip-button-hover-background-color;
	}

	.tabStripButtonActive {
		background-color: $tab-strip-button-active-background-color;
	}

	.dijitTabStripIcon {
		_icon-core-style();
		color: $tab-strip-button-arrow-color;
		vertical-align: middle;
		&:before {
			content: $tab-left-icon;
		}
	}

	.dijitTabStripSlideRightIcon {
		&:before {
			content: $tab-right-icon;
		}
	}

	.dijitTabStripMenuIcon {
		&:before {
			content: $tab-menu-icon;
		}
	}

	/* disabled */

	.dijitTabListContainer-top .tabStripButtonDisabled,
	.dijitTabListContainer-bottom .tabStripButtonDisabled {
		opacity: $disabled-opacity;
	}

	/*********** end left/right scroll buttons + menu button *********/

	/*************** nested tabs ***************/

	.dijitTabContainerNested .dijitTabListWrapper {
		height: auto;
	}

	.dijitTabContainerTabListNested {
		.dijitTab {
			color: $nestedtab-text-color;
			margin: $tab-padding;
			padding: $nestedtab-padding;
			border: 1px solid $nestedtab-border-color;
			border-radius: $nestedtab-border-radius;
			transition-property: background-color, border-color;
	 		transition-duration: .3s;
		}
		.dijitTabHover {
			background-color: $nestedtab-hover-background-color;
		}
		.dijitTabActive {
			color: $nestedtab-active-text-color;
			background-color:$nestedtab-active-background-color;
		}
		.dijitTabChecked,
		.dijitTabChecked.dijitTabHover,
		.dijitTabChecked.dijitTabActive {
			color: $nestedtab-checked-text-color;
			background-color: $nestedtab-checked-background-color;
			&:before {
				display: none;
			}
		}

	}

	/************* nested top tabs *************/

	.dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab {
		margin-right: $nestedtab-spacing;
	}

	/************* nested bottom tabs *************/

	.dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab {
		margin-right: $nestedtab-spacing;
	}

	/************* nested left tabs *************/

	.dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab {
		margin-bottom: $nestedtab-spacing;
	}

	/************* nested right tabs *************/

	.dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab {
		margin-bottom: $nestedtab-spacing;
	}


	.dijitTabPaneWrapperNested {
		border: none; /* prevent double border */
		box-shadow: none;
	}

}