//
// Aside extended
//

// General mode(all devices)
.aside {
	display: flex;
	flex-direction: column;
	width: get($aside-config, width, desktop);
	background-color: var(--kt-aside-bg-color);

	// Aside logo
	.aside-logo {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// Aside menu
	.aside-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		
		// Root links
		.menu {
			align-items: stretch;
			justify-content: center;

			> .menu-item {
				align-items: stretch;
				justify-content: center;
				margin-bottom: 1rem;

				> .menu-link {
					align-items: center;
					justify-content: center;
					padding: 0;

					.menu-icon {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0;
						width: get($aside-config, menu-icon, width);
						height: get($aside-config, menu-icon, width);
						transition: $btn-transition;
						background-color: var(--kt-aside-menu-icon-bg-color);
						@include border-radius(get($aside-config, menu-icon, border-radius));	

						// Icon color
						i,
						.svg-icon {		
							transition: $btn-transition;
							color: var(--kt-aside-menu-icon-color);
						}
					}
				}	

				// States
				&.here > .menu-link,
				> .menu-link.active {
					.menu-icon {
						background-color: var(--kt-aside-menu-icon-bg-color-active);

						// Icon color
						i,
						.svg-icon {
							transition: $btn-transition;
							color: var(--kt-aside-menu-icon-icon-color-active);
						}
					}
				}
			}	
		}
	}	

	// Aside footer
	.aside-footer {
		display: flex;
		align-items: center;
		justify-content: center;		

		.btn-custom {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			width: get($aside-config, menu-icon, width);
			height: get($aside-config, menu-icon, width);
			transition: $btn-transition;
			@include border-radius(get($aside-config, menu-icon, border-radius));	
			background-color: var(--kt-aside-menu-icon-bg-color);

			// Icon color
			i,
			.svg-icon {
				font-size: get($aside-config, menu-icon, size, font);
			}

			// Hover & show states
			&.show,
			&:hover {
				// Icon color
				i,
				.svg-icon {
					font-size: get($aside-config, menu-icon, icon-color-hover);
				}
			}		
		}
	}
}

// Desktop mode
@include media-breakpoint-up(lg) {
	.aside {
		width: get($aside-config, width, desktop);

		// Fixed aside mode
		.aside-fixed & {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			z-index: get($aside-config, z-index);
		}

		// Static aside mode
		.aside-static & {
			position: relative;
			z-index: 1;
		}				
	}
}

// Tablet & mobile modes
@include media-breakpoint-down(lg) {
	.aside {
		display: none;
		width: get($aside-config, width, tablet-and-mobile);	

		// Aside logo 
		.aside-logo {
			display: none;
		}

		// Aside menu
		.aside-menu {
			justify-content: flex-start;

			.menu {
				justify-content: flex-start;
			}
		}	
	}
}