@import "./mixins/mixin.scss";

@include b(layout) {
	height: 100%;
	overflow: hidden;
	@include e(aside) {
		width: 200px;
		min-height: 100%;
		overflow-y: auto;
		background: #304156;
		transition: width 0.28s;
		@include scrollBar;
	}
	@include e(main-container) {
		position: relative;
		height: 100%;
		padding-top: 50px;
	}

	@include e(header) {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 9;
		transition: width 0.28s;
	}

	@include e(sidebar-container) {
		height: 100%;
	}
	@include b(navbar) {
		position: relative;
		height: 50px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
		@include m(avatar) {
			margin-right: 10px;
			margin-left: 10px;
			background-color: #282828;
		}
		@include m(right-menu) {
			height: 100%;
			&:focus {
				outline: none;
			}
		}
		@include m(logout) {
			position: relative;
			margin: 0 16px;
			font-size: 18px;
			cursor: pointer;
			&::after {
				position: absolute;
				top: -10px;
				right: -10px;
				bottom: -10px;
				left: -4px;
				content: '';
			}
		}
	}
	@include m(app-main) {
		position: relative;
		width: 100%;
		height: calc(100vh - 50px);
		overflow-x: auto;
		@include scrollBar;
	}
	@include m(wrapper) {
		overflow: hidden;
		&__div {
			padding: 16px;
			margin: 16px;
			background-color: #fff;
			border-radius: 4px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		}
	}
	.zz-just-first + i {
		display: none;
	}
	.sidebarLogoFade-enter-active {
		transition: opacity 1.5s;
	}

	.sidebarLogoFade-enter,
	.sidebarLogoFade-leave-to {
		opacity: 0;
	}

	.okd-sidebar-logo-container {
		position: relative;
		width: 100%;
		height: 50px;
		overflow: hidden;
		line-height: 50px;
		text-align: center;
		background: #2b2f3a;

		& .sidebar-logo-link {
			width: 100%;
			height: 100%;

			& .sidebar-logo {
				width: auto;
				height: 40px;
				margin-right: 12px;
				vertical-align: middle;
			}

			& .sidebar-title {
				display: inline-block;
				margin: 0;
				font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
				font-size: 14px;
				font-weight: 600;
				line-height: 50px;
				color: #fff;
				vertical-align: middle;
			}
		}

		&.collapse {
			.sidebar-logo {
				margin-right: 0;
			}
		}
	}
	.wlz-app-breadcrumb.el-breadcrumb {
		display: inline-block;
		margin-left: 8px;
		font-size: 14px;
		line-height: 50px;

		.no-redirect {
			color: #97a8be;
			cursor: text;
		}
	}
}