@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@Tabs-spacer-height: @size-XXS;
@Tabs-tab-height: @size-standard-height;
@Tabs-arrow-width: 8px;
@Tabs-border-width: 1px;

.lucid-Tabs {
	&-bar {
		font-size: @fontSize;
		font-family: @fontFamily;
		list-style-type: none;
		display: flex;
		margin: 0;
		padding: 0;
		border-color: @color-borderColor;
	}

	&-navigation-tabs {
		.lucid-Tabs-Tab {
			height: 40px;
			font-size: 15pt;
			font-weight: 200;
		}
	}

	&-variable-width {
		border-bottom: @Tabs-border-width solid @color-borderColorLight;
		.lucid-Tabs-Tab {
			flex: none;
		}
	}

	&-Tab {
		/* https://connect.microsoft.com/IE/feedback/details/949764/ie-11-incorrectly-rejects-flexbox-shorthand-syntax-flex-1-1-0-as-invalid */
		/* stylelint-disable-next-line length-zero-no-unit */
		flex: 1 1 0px;
		height: inherit;
		display: flex;
		justify-content: center;
		align-items: stretch;
		box-sizing: border-box;
		cursor: pointer;
		color: @color-primary;
		user-select: none;
		margin-bottom: -@Tabs-border-width;
		border: @Tabs-border-width solid @color-borderColorLight;
		border-right: 0;
		background-color: @color-white;

		&:last-of-type {
			border-right: @Tabs-border-width solid @color-borderColorLight;
		}

		&:hover {
			background-color: @color-lightGray;
			.Tabs-mixin-tab-arrow-background(@color-lightGray);
		}

		&:active {
			.dropshadow-gradient(@color-gray, @color-lightGray, @Tabs-spacer-height);
		}
	}

	&-Tab-is-disabled {
		color: @color-disabledText;
		cursor: not-allowed;

		&:hover {
			background-color: @color-white;
			.Tabs-mixin-tab-arrow-background();
		}

		&:active {
			background: @color-white;
		}
	}

	&-Tab-is-progressive {
		position: relative;
		border-width: @Tabs-border-width 0;

		&:first-of-type {
			border-left-width: @Tabs-border-width;
		}

		& + * {
			border-left-width: 0;
		}

		.lucid-Tabs-Tab-arrow {
			z-index: 1;

			.lucid-Tabs-Tab-arrow-svg {
				z-index: 1;
			}

			.lucid-Tabs-Tab-arrow-line {
				stroke: @color-borderColor;
			}
		}
		.Tabs-mixin-tab-line(@color-transparent);
		.Tabs-mixin-tab-arrow-background();

		&:not(:first-child) {
			.lucid-Tabs-Tab-content {
				padding-left: 15px;
			}
		}
	}

	&-Tab-is-active {
		.hardstop-gradient();

		border-top: none;
		padding-top: @Tabs-border-width;
		color: @color-black;
		cursor: initial;

		&:hover {
			background-color: @color-white;
			.Tabs-mixin-tab-arrow-background();
		}

		&:active {
			.hardstop-gradient();
		}
		.Tabs-mixin-tab-line();
	}

	&-Tab-is-active-and-open {
		border-bottom: @Tabs-border-width solid @color-white;

		// `z-index: -1` fixes a very minor visual bug here in IE 11, but it
		// introduces a bigger bug when using Tabs inside Dialogs.

		&:hover {
			.Tabs-mixin-tab-arrow-background();
		}
		.Tabs-mixin-tab-line();
	}

	&-Tab-content {
		flex: 1;
		padding: @size-standard/2;
		text-align: center;
	}

	&-Tab-arrow {
		svg {
			height: 100%;
			width: 8px;
			display: block;
			position: absolute;
		}
	}

	&-bar-is-multiline {
		.lucid-Tabs-Tab {
			background-color: @color-lightGray;
			border-color: @color-gray;
			color: @color-darkGray;
			.Tabs-mixin-tab-arrow-background(@color-lightGray);

			&:hover {
				background-color: @color-white;
				.Tabs-mixin-tab-arrow-background(@color-white);
			}
		}

		.lucid-Tabs-Tab-is-active {
			border-bottom: @Tabs-border-width solid @color-white;
			.Tabs-mixin-tab-arrow-background(@color-white);
		}

		.lucid-Tabs-Tab + .lucid-Tabs-Tab-is-disabled {
			background-color: @color-lightGray;
			.Tabs-mixin-tab-arrow-background(@color-lightGray);

			&:hover {
				background-color: @color-lightGray;
				.Tabs-mixin-tab-arrow-background(@color-lightGray);
			}

			&:active {
				background-color: @color-lightGray;
			}
		}
	}

	&-content {
		margin-top: 1px;
	}
}

.Tabs-mixin-tab-line(@color-Tab-line: @color-primary) {
	.lucid-Tabs-Tab-arrow {
		.lucid-Tabs-Tab-arrow-tab-line {
			fill: @color-Tab-line;
		}
	}
}

.Tabs-mixin-tab-arrow-background(@color-Tab-background: @color-white) {
	.lucid-Tabs-Tab-arrow {
		.lucid-Tabs-Tab-arrow-background {
			fill: @color-Tab-background;
		}
	}
}