@mixin admin() {
	position: relative;
	display: flex;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.dui__admin {
	@include admin();

	&__loader {
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	&__sidebar {
		flex: 0 0 0;
		will-change: width, transform;
		transition: $normalTrans;
		min-height: 100vh;
		width: 0;
		background-color: $sidebarMainBg;
		z-index: 9998;
		&__inner {
			will-change: width, transform;
			transition: $normalTrans;
			background-color: $sidebarMainBg;
			position: sticky;
			top: 0;
			width: 20rem;
			transform: translateX(-101%);
			height: 100vh;
			overflow: hidden;
			overscroll-behavior: contain;
			display: flex;
			flex-direction: column;
			&:hover {
				overflow-y: auto;
			}
		}

		&--expanded {
			.dui__admin__sidebar__inner {
				transform: translateX(0);
				box-shadow: map-get($elevations, "strong");
			}
		}

		&__item {
			display: flex;
			align-items: center;
			color: $sidebarMainFont;
			position: relative;
			* {
				white-space: nowrap;
			}
			&:focus {
				outline: none;
			}
			@include focusVisible();
			&[href] {
				transition: $fastTrans;
				* {
					z-index: 1;
				}
				&::after {
					will-change: transform;
					transition: $fastTrans;
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					width: 0.3125rem;
					transform: translateX(-100%);
					background-color: $primaryBg;
				}
				&:hover {
					background-color: darken($sidebarBg, 2.5%);
					&::after {
						transform: translateX(0);
					}
				}
			}
			&__main {
				flex: 0 0 3.5rem;
				display: grid;
				align-items: center;
				justify-items: center;
			}
			&__extended {
				flex: 1;
				display: grid;
				align-items: center;
			}
		}

		@media (min-width: map-get($breakpoints, "sm")) {
			flex: 0 0 3.5rem;
			width: 3.5rem;
			&__inner {
				width: 3.5rem;
				transform: none;
			}
			&--expanded {
				.dui__admin__sidebar__inner {
					width: 20rem;
				}
			}
		}

		@media (min-width: map-get($breakpoints, "lg")) {
			width: 3.5rem;
			flex: 0 0 3.5rem;
			&__inner {
				width: 3.5rem;
				transform: none;
			}
			&--expanded {
				width: 20rem;
				flex: 0 0 20rem;
				.dui__admin__sidebar__inner {
					width: 20rem;
					box-shadow: none;
				}
			}
			&--expanded-hover {
				.dui__admin__sidebar__inner {
					width: 20rem;
					box-shadow: map-get($elevations, "strong");
				}
			}
		}
	}

	&__inner {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100vh;
		overflow-y: auto;
		& > * {
			width: 100%;
		}
	}

	&__topbar {
		flex: 0 0 auto;
		background-color: $topbarBg;
		position: sticky;
		top: 0;
		height: 3.5rem;
		z-index: 9997;
	}

	&__content {
		background-color: $bg;
		flex: 1 1 auto;
	}

	&__footer {
		flex: 0 0 auto;
		background-color: $bg;
		color: $subFont;
	}
}