ul.x-tab-strip {
	padding-top: $padding-medium;
	padding-left: $padding-medium;
	border-color: $grey;

	li {
		display : inline-block;
		margin: 0 $padding-small 0 0;
		border: 1px solid $background-color-tab !important;

		.x-tab-right {
			background: $background-color-tab;
			padding-left: $padding-medium;
			padding-right: $padding-medium;

			.x-tab-left {
				background: transparent;
				padding: 0;

				.x-tab-strip-inner {
					background: transparent;
					overflow: visible;

					.x-tab-strip-text {
						height: $button-small-height - 1px; /* 1px for the border) */
						line-height: $button-small-height - 1px;
						padding: 0;
					}
				}
			}
		}
	}

	li.x-tab-strip-active {
		position: relative;
		z-index: 10;
		border-color: $grey;

		.x-tab-right {
			background: $background-color-tab-active;

			.x-tab-left {
				.x-tab-strip-inner {
					.x-tab-strip-text {
						padding-bottom: 1px;
						/* Active tab is styled bold by ExtJS */
						font-weight: normal;
					}
				}
			}
		}
	}

	li:not(.x-tab-strip-active):hover {
		.x-tab-right {
			background-color: $normal-button-bgcolor-hover;
		}
	}

	li.x-tab-strip-closable {
		.x-tab-right {
			/* close cross is 7x7 px */
			padding-right: 2 * $padding-large + 7px;
		}
	}
}

ul.x-tab-strip-top li {
	border-bottom: none !important;
}
ul.x-tab-strip-bottom li {
	border-top: none !important;
}


/*********************************************************
 *  Special case: the tabs of the main content panel
 ********************************************************/

#zarafa-mainpanel > .x-tab-panel-header {
	ul.x-tab-strip-top {
		/* Move the border from the tab-strip to the panels below it so we can have 'seperated' grid panel and preview panel */
		border-bottom: none;
		padding-top: 0;
		padding-left: 0;

		li {
			.x-tab-right {
				padding-right: $padding-extra-large;

				.x-tab-strip-text {
					height: $header-height - 1px; /* 1px for the border) */
					line-height: $header-height - 1px;
				}
			}
		}

		li.x-tab-strip-closable {
			.x-tab-right {
				/* close cross is 7x7 px */
				padding-right: 2 * $padding-large + 7px;
			}

			a.x-tab-strip-close {
				height: 20px;
				width: 20px;
				top: ($header-height - 1px - 20px) / 2;
				right: 2px;
			}
		}

		li.x-tab-strip-active{
			.x-tab-right {
				/* because we changed the border, we don't need this negative margin anymore */
				margin-bottom: 0;
			}
		}

		li.x-tab-edge {
			width: auto;

			.x-tab-add {
				height: $header-height;
				width: 11px;
				padding: 0 $padding-medium;
				display: block;
				cursor: pointer;
			}
		}
	}
}
#zarafa-mainpanel {
	#zarafa-mainpanel-content {
		> .x-panel {
			border-top: 1px solid $grey;
		}

		#zarafa-mainpanel-contentpanel-mail.x-panel {
			border-top: none;

			> .x-panel-bwrap {
				> .x-panel-body {
					/* needed to have a transparency in the area between the grid panel and the preview panel */
					background: transparent !important;
				}
			}
		}
	}

	> .x-tab-panel-bwrap {
		margin-top: -1px;

		> .x-tab-panel-body {
			/* needed to have a transparency in the area between the grid panel and the preview panel */
			background: transparent;

			/* Move these borders to the inside panel(s) so we can have 'separate' grid and preview panels for mail context */
			border-left: none;
			border-right: none;
			border-bottom: none;

			> div > .x-panel {
				border: 1px solid $grey;
			}

			> div > div#zarafa-mainpanel-contentpanel-mail {
				border: none;

				> .x-panel-bwrap > .x-panel-body > .x-panel {
					border: 1px solid $grey;
				}
			}


		}
	}
}



/************************************************************
 * Icons
 ************************************************************

/* General icon position */
ul.x-tab-strip {
	li {
		.x-tab-right {
			.x-tab-left {
				.x-tab-strip-inner{
					.x-tab-strip-icon {
						/* icons are 16px wide */
						padding-left: $padding-medium + 16px;
						background-repeat: no-repeat;
						background-position: left 10px !important;
					}
				}
			}
		}
	}
	li.x-tab-with-icon {
		.x-tab-right {
			.x-tab-left {
				.x-tab-strip-inner{
					.x-tab-strip-text {
						/* icons are 16px wide */
						padding-left: $padding-medium + 16px;
						background-repeat: no-repeat;
						background-position: left 10px !important;
					}
					.icon_cogwheel {
						background-position: left 8px !important;
					}
				}
			}
		}
	}
}

/* iconCls for dirty messages */
.x-tab-strip-text.zarafa-tab-edited {
	font-style : italic !important;
}

ul.x-tab-strip-top {
	background-image: none;
	background-color:transparent;
}

.x-tab-panel-header, .x-tab-panel-footer {
	background-color:transparent;
	border: none;
	padding:0;
}

/* Override tab text font color */
.x-tab-strip span.x-tab-strip-text {
	color: $font-color-dark;
}

/* Paging left/right arrows when there are too many tabs open to fit in the tab layout. */
.x-tab-scroller-left {
	border-bottom-color: transparent;
}

.x-tab-scroller-right {
	border-bottom-color: transparent;
}
