$lui-tabs-bar-height: 60px !default;
$lui-tabs-tab-font-color: $grey-500 !default;
$lui-tabs-background-color: $white !default;
$lui-tabs-active-tab-font-color: $primary-1-color !default;
$lui-tabs-hover-background-color: $grey-100 !default;
$lui-tabs-hover-font-color: rgba($primary-1-color, 0.9) !default;
$lui-tabs-disabled-font-color: $grey-400 !default;
$lui-tabs-container-overflow: hidden !default !default;

.lui-tabs-container {
	position: relative;

	.lui-tab-item-container-wrapper{
		height: $lui-tabs-bar-height;

		&.lui-is-scrollable {
			margin-left: 30px;
			margin-right: 30px;
		}

		.lui-tab-item-container {
			margin: 0;
			line-height: $lui-tabs-bar-height;
			width: 100%;
			background-color: $lui-tabs-background-color;
			white-space: nowrap;
			display: block;
			overflow-y: hidden;
			overflow-x: scroll;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
			pointer-events: auto;

			.lui-tab-item {
				display: inline-block;
				height: 100%;
				cursor: pointer;
				text-align: center;
				vertical-align: middle;
				line-height: $lui-tabs-bar-height;
				color: $lui-tabs-tab-font-color;
				opacity: .6;
				padding-left: 15px;
				padding-right: 15px;
				overflow: hidden;

				&.lui-tab-is-active {
					color: $lui-tabs-active-tab-font-color;
					background: $lui-tabs-hover-background-color;
					opacity: 1;
				}

				&.lui-tab-is-disabled {
					color: $lui-tabs-disabled-font-color;
					cursor: pointer;
					pointer-events: none;

				}

				&:hover {
					color: $lui-tabs-hover-font-color;
					background: $lui-tabs-hover-background-color;
				}

			}

			.lui-tabs-container-scroll-button-left {
				position: absolute;
				top: 0px;
				left: 0px;
				height: $lui-tabs-bar-height;
				width: 30px;
				padding-left: 10px;
				padding-top: 19px;
				color: $lui-tabs-tab-font-color;
				display: none;

				&:hover {
					color: $lui-tabs-active-tab-font-color;
					background: $lui-tabs-hover-background-color;
					cursor: pointer;
				}

				&.lui-is-scrollable {
					display: inline-block;
				}

				&.lui-is-bottom {
					top: initial;
					bottom: 0px;
				}
			}

			.lui-tabs-container-scroll-button-right {
				position: absolute;
				top: 0px;
				right: 0px;
				height: $lui-tabs-bar-height;
				width: 30px;
				padding-left: 10px;
				padding-top: 19px;
				color: $lui-tabs-tab-font-color;
				display: none;

				&:hover{
					color: $lui-tabs-active-tab-font-color;
					background: $lui-tabs-hover-background-color;
					cursor: pointer;
				}

				&.lui-is-scrollable {
					display: inline-block;
				}

				&.lui-is-bottom {
					top: initial;
					bottom: 0px;
				}
			}
		}

		}
		.lui-tab-template {
			display: block;
			width: 100%;
			position: relative;
			text-align: initial;
	}
}