.layout-columns-aside {
	width: var(--el-columnsMenuWidth);
	height: 100%;
	background: var(--next-bg-columnsMenuBar);
	ul {
		position: relative;
		.layout-columns-active,
		.layout-columns-active a {
			color: var(--next-bg-columnsMenuBarColor) !important;
			transition: 0.3s ease-in-out;
		}
		.layout-columns-hover {
			color: var(--el-color-primary);
			a {
				color: var(--el-color-primary);
			}
		}
		li {
			color: var(--next-bg-columnsMenuBarColor);
			width: 100%;
			height: var(--el-columnsMenuHeight);
			text-align: center;
			display: flex;
			cursor: pointer;
			position: relative;
			z-index: 1;
			&:hover {
				//@extend .layout-columns-hover;
				background-color: var(--el-color-primary-light-3);
			}
			.columns-vertical {
				margin: auto;
				.columns-vertical-title {
					padding-top: 1px;
				}
			}
			.columns-horizontal {
				display: flex;
				height: var(--el-columnsMenuHeight);
				width: 100%;
				align-items: center;
				padding: 0 5px;
				i {
					margin-right: 3px;
				}
				a {
					display: flex;
					.columns-horizontal-title {
						padding-top: 1px;
					}
				}
			}
			a {
				text-decoration: none;
				color: var(--next-bg-columnsMenuBarColor);
			}
		}
		.columns-round {
			background: var(--el-color-primary);
			color: var(--el-color-white);
			position: absolute;
			left: 50%;
			top: 2px;
			height: var(--el-columnsMenuRoundHeight);
			width: var(--el-columnsMenuRoundWidth);
			transform: translateX(-50%);
			z-index: 0;
			transition: 0.5s ease-in-out;
			border-radius: 5px;
		}
		.columns-card {
			@extend .columns-round;
			top: 0;
			height: var(--el-columnsMenuHeight);
			width: 100%;
			border-radius: 0;
		}
	}
}

.layout-logo {
	height: var(--el-columnsLogoHeight);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	margin-top: 5px;
	animation: logoAnimation 0.3s ease-in-out;
	&-medium-img {
		width: auto;
		height: 80%;
	}
	&:hover {
		img {
			animation: logoAnimation 0.3s ease-in-out;
		}
	}
}