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

@Submarine-Divider-height: @size-XS;
@Submarine-Bar-header-height: 33px;
@Submarine-transition-duration: @timing-animation-fade;
@Submarine-transition-half-duration: @Submarine-transition-duration / 2;
@Submarine-transition-third-duration: @Submarine-transition-duration / 3;

.lucid-Submarine {
	display: flex;
	align-items: stretch;
	height: 100%;
	width: 100%;
	flex-direction: column;

	& > .lucid-SplitHorizontal-inner {

		& > .lucid-Submarine-Bar {
			position: relative;
			z-index: @zindex-base;
			background-color: @color-white;
			overflow: auto;
			display: flex;

			/* 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-shrink: 0px;

			.lucid-Submarine-is-position-top& {
				border-bottom: @border-standardBorder;
				flex-direction: column-reverse;
			}

			.lucid-Submarine-is-position-bottom& {
				border-top: @border-standardBorder;
				flex-direction: column;
			}

			& > .lucid-Submarine-Bar-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: @color-backgroundColor;
				opacity: 1;
				z-index: @zindex-base;

				.lucid-SplitHorizontal-is-expanded& {
					opacity: 0;
					pointer-events: none;
				}
			}

			& > .lucid-Submarine-Bar-header {
				.box-sizing();

				background-color: @color-backgroundColor;
				color: @color-textColor;
				font: @size-L @fontFamily;
				font-weight: bold;
				display: flex;
				flex-shrink: 0;
				min-height: @Submarine-Bar-header-height;

				.lucid-Submarine-is-position-top& {
					border-top: @border-standardBorder;
				}

				.lucid-Submarine-is-position-bottom& {
					border-bottom: @border-standardBorder;
				}

				& > .lucid-Submarine-Bar-Title {
					margin: @size-XS auto @size-XS @size-standard;

					&-is-shown-collapsed {
						z-index: @zindex-base;
					}
				}

				& > .lucid-Submarine-expander {
					.no-safari-flicker();
					.box-sizing();

					align-self: flex-start;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-shrink: 0;
					height: @size-expander-button;
					width: @size-expander-button;
					margin: @size-XS;
					border: solid 1px @featured-color-default-borderColor;
					border-radius: @size-borderRadius;
					cursor: pointer;
					z-index: @zindex-base + 1;
					background-image: linear-gradient(@featured-color-default-gradientStartColor, @featured-color-default-gradientEndColor);

					&:hover {
						background-image: linear-gradient(@featured-color-default-gradientEndColor, @featured-color-default-gradientStartColor);
					}

					.lucid-ChevronIcon {
						fill: @color-darkGray;
					}
				}
			}

			& > .lucid-Submarine-Bar-content {
				flex: 1 0;
				padding: @size-XS;
			}
		}

		& > .lucid-SplitHorizontal-Divider.lucid-Submarine-Divider {
			position: relative;
			display: flex;
			flex-shrink: 0;
			flex-direction: column;
			background-color: @color-backgroundColor;
			height: @Submarine-Divider-height;
			z-index: @zindex-base - 1;

			.lucid-Submarine-is-position-top& {
				transform: translateY(-@Submarine-Divider-height);
				border-bottom: @border-standardBorder;
			}

			.lucid-Submarine-is-position-bottom& {
				transform: translateY(@Submarine-Divider-height);
				border-top: @border-standardBorder;
			}

			.lucid-SplitHorizontal-is-expanded& {
				transform: translateY(0);
			}

			.lucid-Submarine-is-resize-disabled& {
				display: none;
			}

			.lucid-Submarine-Divider-gripper {
				margin: auto;
			}

			&:hover {
				background-color: @color-mediumGray;

				.lucid-Submarine-Divider-gripper {
					fill: @color-darkGray;
				}
			}
		}

		& > .lucid-Submarine-Primary {
			/* 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-basis: 0px;
			overflow: auto;
			display: flex;
			flex-direction: column;

			.lucid-Submarine-is-position-top& {
				margin-top: -@Submarine-Divider-height;

				.lucid-Submarine-is-resize-disabled& {
					margin-top: 0;
				}

				.lucid-SplitHorizontal-is-expanded& {
					margin-top: 0;
				}
			}

			.lucid-Submarine-is-position-bottom& {
				margin-bottom: -@Submarine-Divider-height;

				.lucid-Submarine-is-resize-disabled& {
					margin-bottom: 0;
				}

				.lucid-SplitHorizontal-is-expanded& {
					margin-bottom: 0;
				}
			}

			& > .lucid-Submarine {
				flex: 1;
			}
		}
	}

	&.lucid-SplitHorizontal-is-animated.lucid-SplitHorizontal-is-animated {
		& > .lucid-SplitHorizontal-inner {
			& > .lucid-Submarine-Bar {
				& > .lucid-Submarine-Bar-overlay {
					transition: opacity @Submarine-transition-half-duration;
				}
			}

			& > .lucid-SplitHorizontal-Divider.lucid-Submarine-Divider {
				transition: transform @Submarine-transition-third-duration, background-color @Submarine-transition-third-duration;

				.lucid-SplitHorizontal-is-expanded& {
					transition: transform @Submarine-transition-third-duration @Submarine-transition-duration, background-color @Submarine-transition-third-duration;
				}
			}

			& > .lucid-Submarine-Primary {
				.lucid-Submarine-is-position-top& {
					transition: margin-top @Submarine-transition-half-duration linear;
				}

				.lucid-Submarine-is-position-bottom& {
					transition: margin-bottom @Submarine-transition-third-duration;

					.lucid-SplitHorizontal-is-expanded& {
						transition: margin-bottom @Submarine-transition-third-duration @Submarine-transition-duration;
					}
				}
			}
		}
	}
}