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

@Sidebar-Divider-width: @size-XS;
@Sidebar-transition-duration: @timing-animation-fade;
@Sidebar-transition-half-duration: @Sidebar-transition-duration / 2;
@Sidebar-transition-third-duration: @Sidebar-transition-duration / 3;

.lucid-Sidebar {
	display: flex;
	align-items: stretch;
	height: 100%;
	width: 100%;

	& > .lucid-SplitVertical-inner {
		width: 100%;

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

			.lucid-Sidebar-is-position-left& {
				border-right: @border-standardBorder;
			}

			.lucid-Sidebar-is-position-right& {
				border-left: @border-standardBorder;
			}

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

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

			& > .lucid-Sidebar-Bar-header {
				background-color: @color-backgroundColor;
				border-bottom: @border-lightBorder;
				color: @color-textColor;
				font: @size-L @fontFamily;
				font-weight: bold;
				display: flex;

				.lucid-Sidebar-is-position-left& {
					flex-direction: row;
				}

				.lucid-Sidebar-is-position-right& {
					flex-direction: row-reverse;
				}

				& > .lucid-Sidebar-Bar-Title {
					.lucid-Sidebar-is-position-left& {
						margin: @size-XS auto @size-XS @size-standard;
					}

					.lucid-Sidebar-is-position-right& {
						margin: @size-XS auto @size-XS 0;
					}
				}

				& > .lucid-Sidebar-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-Sidebar-Bar-content.lucid-Sidebar-Bar-content-has-gutters {
				padding: @size-XS;
			}
		}

		// Triple specificity to beat some styles in SplitVertical.less
		& > .lucid-SplitVertical-Divider.lucid-Sidebar-Divider.lucid-Sidebar-Divider {
			position: relative;
			display: flex;
			flex-direction: column;
			background-color: @color-backgroundColor;
			width: @Sidebar-Divider-width;
			z-index: @zindex-base - 1;

			.lucid-Sidebar-is-position-left& {
				transform: translateX(-@Sidebar-Divider-width);
				border-right: @border-standardBorder;
			}

			.lucid-Sidebar-is-position-right& {
				transform: translateX(@Sidebar-Divider-width);
				border-left: @border-standardBorder;
			}

			.lucid-SplitVertical-is-expanded& {
				transform: translateX(0);
			}

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

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

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

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

		& > .lucid-Sidebar-Primary {
			overflow: auto;
			display: flex;
			flex-direction: column;

			.lucid-Sidebar-is-position-left& {
				margin-left: -@Sidebar-Divider-width;

				.lucid-Sidebar-is-resize-disabled& {
					margin-left: 0;
				}

				.lucid-SplitVertical-is-expanded& {
					margin-left: 0;
				}
			}

			.lucid-Sidebar-is-position-right& {
				margin-right: -@Sidebar-Divider-width;

				.lucid-Sidebar-is-resize-disabled& {
					margin-right: 0;
				}

				.lucid-SplitVertical-is-expanded& {
					margin-right: 0;
				}
			}

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

			// Addresses a Firefox specific rendering issue with a Submarine nested in a Sidebar.
			& > .lucid-Submarine,
			x:-moz-any-link,
			x:default {
				display: block;
				height: 100%;
			}
		}
	}

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

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

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

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

				.lucid-Sidebar-is-position-right& {
					transition: margin-right @Sidebar-transition-third-duration;

					.lucid-SplitVertical-is-expanded& {
						transition: margin-right @Sidebar-transition-third-duration @Sidebar-transition-duration;
					}
				}
			}
		}
	}
}