/* Patterns - Interaction - Sidebar */
/* Since this pattern is Deprecated, it should not appear at SASSDCS! */

.sidebar {
	background-color: var(--color-neutral-0);
	box-shadow: var(--shadow-l);
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: var(--space-none);
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(102%);
	transition: all 130ms ease-in;
	width: 500px;
	will-change: transform;
	z-index: var(--layer-global-off-canvas);

	// Service Studio Preview
	& {
		-servicestudio-bottom: 20px;
		-servicestudio-height: auto;
		-servicestudio-margin-left: auto;
		-servicestudio-position: relative;
		-servicestudio-transform: none;
		-servicestudio-webkit-transform: none;
	}

	&:before {
		background-color: transparent;
		content: '';
		height: 100%;
		left: -24px;
		position: fixed;
		width: 24px;
	}

	&-header,
	&-content {
		padding: var(--space-base) var(--space-m);
	}

	&-content {
		flex: 1;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.active-screen {
	&.screen-container {
		.sidebar {
			&.sidebar-open {
				transform: none;
				transition: all 330ms ease-out;
				will-change: transform;
			}
		}
	}
}

// Responsive --------------------------------------------------------------------
.desktop {
	.sidebar:before {
		display: none;
	}
}

.android[data-status-bar-height] {
	.layout-native {
		.sidebar {
			padding-top: var(--status-bar-height);
		}
	}
}

.ios {
	.layout-native {
		.sidebar {
			padding-bottom: var(--os-safe-area-bottom);
			padding-top: var(--os-safe-area-top);
		}
	}

	.phone {
		&.landscape {
			.layout-native {
				.sidebar:before {
					left: calc((var(--os-safe-area-left) + 12px) * -1);
					width: calc(var(--os-safe-area-left) + 12px);
				}
			}
		}
	}
}

.landscape {
	.layout-native {
		.sidebar {
			padding-bottom: var(--os-safe-area-bottom);
		}
	}
}

.tablet,
.phone {
	.sidebar {
		&.full-width {
			width: 100%;

			&-vw {
				width: 100vw;
			}
		}
	}
}

.tablet {
	.layout-native {
		.sidebar {
			width: 336px;
		}
	}
}

.phone {
	.sidebar {
		width: 85vw;
	}
}