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

.@{prefix}-SidePanel {
	z-index: 100;

	.@{prefix}-SidePanel-pane {
		position: fixed;
		height: auto;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: 240px;
		background-color: @color-neutral-2;
		box-shadow: -1px 0 3px 0 rgba(33, 31, 31, 0.1);

		.@{prefix}-SidePanel-is-animated& {
			transition: transform 200ms;
		}

		.@{prefix}-SidePanel-is-expanded.@{prefix}-SidePanel-is-expanded& {
			transform: translateX(0);
		}

		.@{prefix}-SidePanel-position-right& {
			right: 0;
			transform: translateX(100%);
		}

		.@{prefix}-SidePanel-position-left& {
			left: 0;
			transform: translateX(-100%);

			.@{prefix}-SidePanel-body {
				flex-direction: row-reverse;

				.@{prefix}-SidePanel-content {
					overflow: auto;
					padding: 20px 0px 20px 20px;
					flex: 1;
				}
			}
		}

		.@{prefix}-SidePanel-header {
			border-bottom: @border-lightBorder;
			background: white;
			padding: 20px;

			.@{prefix}-SidePanel-header-inner-wrapper {
				display: flex;
				align-items: start;

				.@{prefix}-SidePanel-header-content {
					flex: 1;
					font-size: 24px;
					font-weight: 500;
				}

				.@{prefix}-SidePanel-header-closer-button .@{prefix}-Icon {
					stroke: @color-neutral-6;
				}
			}
		}
		.@{prefix}-SidePanel-body {
			flex: 1;
			display: flex;
			overflow: hidden;

			.@{prefix}-SidePanel-grabber {
				background-color: @color-neutral-2;
				width: 20px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: grab;
				box-sizing: border-box;

				.@{prefix}-GripperVerticalIcon {
					transform: translateX(-0.5px);
					opacity: 0.5;
				}

				&:active {
					cursor: grabbing;
				}

				&:active, &:hover {

					.@{prefix}-GripperVerticalIcon {
						opacity: 1;
					}
				}
			}

			.@{prefix}-SidePanel-content {
				overflow: auto;
				padding: 20px 20px 20px 0;
				flex: 1;
			}

		}

	}
}