div.menu-wrapper
	div.menu
		position: fixed

		top: 0
		width: 150px

		overflow-x: hidden
		overflow-y: auto

		border-radius: $borderRadius / 2

		background-color: $primary
		box-shadow: $primaryOutline

		opacity: 0
		pointer-events: none

		transition: top $softBounceTransitionAlt

		&.is-header
			&.is-left
				left: 16px

			&.is-right
				right: 16px

		div.menu-section
			&:not(:last-child)
				border-bottom: rgba(112, 128, 144, 0.5) 1.5px solid

		a.is-wrapper:not(:last-child) div.menu-option-wrapper div.menu-option
			border-bottom: $primaryBorder

			@media screen and (prefers-color-scheme: dark)
				border-bottom: $secondaryBorder

		div.menu-option
			padding: 0.8em

			transition: background-color $softTransition

			cursor: default

			&:not(:last-child)
				border-bottom: $primaryBorder

				@media screen and (prefers-color-scheme: dark)
					border-bottom: $secondaryBorder

			&:not(.disabled):hover
				cursor: pointer
				background-color: $primaryHover

			&.has-icon
				display: flex

				p.menu-option-content
					margin-left: 8px

			&.is-disabled
				opacity: 1

				&:not(.is-loading)
					cursor: default !important

			img.menu-option-icon
				@media screen and (prefers-color-scheme: dark)
					filter: invert(1)

			p.menu-option-content
				margin: 0
				padding: 0

				&.menu-option-title
					font-size: 18px
					font-weight: bold

			div.menu-option-content
				display: flex
				flex-direction: column

				p.menu-option-subtitle
					font-size: 15px
					font-weight: 300

					margin-top: 5px

					opacity: .65

				p.menu-option-hint
					font-size: 12px
					font-weight: 300

					margin-top: 5px

					opacity: .65

			@media screen and (prefers-color-scheme: dark)
				&:not(.disabled):hover
					background-color: $secondaryHover

		@media screen and (prefers-color-scheme: dark)
			background-color: $secondary
			box-shadow: $secondaryOutline

	div.menu-cover
		position: fixed

		top: 0
		left: 0
		width: 100%
		height: 100%

		opacity: 0
		pointer-events: none

		transition: opacity $softTransition

		z-index: -1

	&.visible
		div.menu
			top: 60px

			opacity: 1
			pointer-events: all

		div.menu-cover
			background-color: rgba(0, 0, 0, 0.75)

			opacity: 1
			pointer-events: all