const sidebar-spacing-y = 0.7rem

#sidebar
	vertical
	position fixed
	left 0
	top 0
	z-index 10
	width 70vw
	max-width 300px
	height 100%
	background sidebar-opaque-background
	transform translateX(-100%)
	overflow-x hidden
	overflow-y auto
	opacity 0
	pointer-events none
	box-shadow 24px 0 24px rgba(0, 0, 0, 0.2)
	transition opacity transition-speed ease, transform transition-speed ease
	will-change opacity, transition

	.user-image-container
		horizontal
		position relative
		justify-content center
		margin 0.8rem 0
		flex-shrink 0

> 800px
	#sidebar
		opacity 1
		width 180px
		transform none
		position static
		pointer-events auto
		box-shadow none
		border-right ui-border
		background sidebar-background

> 1400px
	#sidebar
		width 200px

.sidebar-visible
	transform translateX(0) !important
	pointer-events auto !important
	opacity 1 !important

.sidebar-link
	color text-color

	&.active
		.sidebar-button
			color tab-active-color
			background tab-active-background
			text-shadow tab-active-text-shadow
			background tab-active-background

.sidebar-button
	horizontal
	align-items center
	padding sidebar-spacing-y 1rem
	// background ui-background

	.icon
		font-size 1rem
		margin-right 0.75rem

.badge
	horizontal
	justify-content center
	align-items center
	background reverse-light-color
	border-radius 50%
	padding 0.5rem
	color text-color
	width 30px
	height 30px

	:hover
		color text-color
		background reverse-light-hover-color

.sidebar-badge
	position absolute
	top 50%
	transform translateY(-50%)

	:active
		transform translateY(-50%) translateY(3px)

.left-badge
	left 12%

.right-badge
	right 12%

.badge-important
	background badge-important-bg-color
	color badge-important-text-color
	font-weight bold

	:hover
		background badge-important-hover-bg-color
		color badge-important-text-color
		text-shadow none