@import '../../styles/color.less';
@headerHeight: 66px;
@headerBg: #d1021c;

.layout {
	position: relative;
	width: 100%;
	height: 100%;

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

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

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

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

		&-title {
			font-size: 38px;
			line-height: 38px;
			margin-right: 8px;
		}

		&-text {
			font-size: 16px;
			line-height: 24px;
		}
	}

	&-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: @headerBg;
		}

		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: @headerBg;
				background-color: #ffffff;
			}
		}

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

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

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

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

.nav {
	position: relative;
	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 @border-color;

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