@import '../../styles/public.less';

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

	&-header {
		height: 48px;
		min-height: 48px;
		background-color: #ffffff;
		display: flex;

		&-logo {
			padding: 0 24px;
			min-width: 200px;
			text-align: center;
			line-height: 48px;
		}

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

			&-item {
				padding: 0 24px;
				height: 48px;
				line-height: 48px;
			}

			&-active {
				background-color: @red-1;
				color: @main-color;
			}
		}

		&-user {
			display: flex;
			padding-right: 24px;

			&-item {
				padding: 0 16px;
				height: 48px;
				line-height: 48px;

				svg {
					font-size: 16px;
				}

				&:hover {
					background-color: @red-1;
					cursor: pointer;
				}
			}

			&-avatar {
				display: flex;
				align-items: center;
				padding: 0 16px;
				height: 48px;

				&:hover {
					background-color: @red-1;
					cursor: pointer;
				}
			}

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

			&-name {
				width: 80px;
			}

			&-unit {
				width: 100px;
				font-size: 12px;
				line-height: 20px;
				color: @second-text-color;
			}
		}
	}

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

	&-nva {
		height: 100%;
		background-color: #ffffff;
	}

	&-child {
		flex: 1;
		position: relative;
	}
}