@import '../../styles/theme.less';
@headerHeight: 66px;

.layout {
	&-main {
		display: flex;
		position: absolute;
		top: @headerHeight;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
	}

	&-child {
		flex: 1;
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}
}

.header {
	height: @headerHeight;
	min-height: @headerHeight;
	background-color: @main-color;
	color: #ffffff;
	display: flex;
	align-items: center;

	&-logo {
		padding: 0 24px;
		display: flex;
		align-items: center;

		img {
			height: @headerHeight;
		}

		&-text {
			color: @main-color;
			margin-left: 8px;
			text-align-last: justify;
			text-align: justify;
			text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
		}

		&-title {
			font-size: 16px;
			font-family: DingTalk;
		}
	}

	&-menu {
		padding: 0 24px;
		flex: 1;
		display: flex;

		&-item {
			cursor: pointer;
			padding: 4px 12px;
			text-align: center;
			border-radius: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-right: 20px;

			&:last-child {
				margin-right: 0;
			}
		}

		&-active {
			background-color: #ffffff;
			color: @main-color;
		}

		img {
			width: 24px;
		}
	}

	&-user {
		padding-right: 12px;

		&-item {
			padding: 0 12px;
			height: @headerHeight;
			display: flex;
			align-items: center;
			cursor: pointer;

			.anticon {
				font-size: 24px;
				color: #ffffff;
			}

			.ant-badge-count {
				color: @main-color;
				background-color: #ffffff;
			}
		}

		&-avatar {
			display: flex;
			align-items: center;
			padding: 0 16px;
			height: @headerHeight;
			cursor: pointer;
		}

		.ant-avatar {
			background-color: #ffffff;
			color: @main-color;
		}

		&-name,
		&-unit {
			margin-left: 8px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 300px;
		}

		&-unit {
			font-size: 12px;
			line-height: 20px;
			color: #dfdfdf;

			.public-rightBorder {
				&::before {
					border-color: #dfdfdf;
				}
			}
		}
	}
}

.nav {
	z-index: 99;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-right: 1px solid #e6e6e6;

	&-menuFold {
		font-size: 16px;
		padding: 8px 24px;
		border-top: 1px solid @divider-color;

		&:hover {
			color: @main-color;
			cursor: pointer;
		}
	}
}