@import "themes";

.view {
	@include full-width;
	transition-duration: 300ms;
	position: absolute;
	top: $header-height;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: $z-view;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	@include break-point-min($bp-wide) {
		top: 0;
	}
}

.main-view,
.detail-view {
	perspective: 1000;
	backface-visibility: hidden;
	background-color: white;

	@include on-theme(dark) {
		background-color: $dark-bg-color-2;
	}
}

.main-view {
	transform: translate3d(-100%, 0, 0);

	&.show-menu {
		transform: translate3d(140px, 0px, 0px);
	}

	@include break-point-min($bp-large) {
		width: $main-view-large;
		left: $menu-view-large;
		transform: none !important;
	}

	@include break-point-min($bp-large-x) {
		width: $main-view-large-x;
		left: $menu-view-large-x;
	}

	@include break-point-min($bp-wide) {
		width: $main-view-wide;
		left: $menu-view-wide;
	}

	@include break-point-min($bp-wide-x) {
		width: $main-view-wide-x;
		left: $menu-view-wide-x;
	}
}

.detail-view {
	transform: translate3d(100%, 0, 0);

	@include break-point-min($bp-large) {
		width: $detail-view-large;
		left: $menu-view-large;
	}

	@include break-point-min($bp-large-x) {
		width: $detail-view-large-x;
		left: $menu-view-large-x;
	}

	@include break-point-min($bp-wide) {
		width: $detail-view-wide;
		right: 0;
		left: auto;
		border-left: 1px solid #aaa;
		transform: none;

		@include on-theme(dark) {
			border-left: 1px solid $dark-line-color-1;
		}
	}

	@include break-point-min($bp-wide-x) {
		width: $detail-view-wide-x;
	}
}

.wrapper {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	-webkit-overflow-scrolling: touch;

	@include break-point-min($bp-wide) {
		height: calc(100% - #{$footer-height}) !important;
	}
}

.show-view {
	transform: translate3d(0, 0, 0);
}

#main-overflow {
	width: 100%;
}
