div.player-footer
	position: absolute

	left: 0
	bottom: 0
	width: $playerWidth
	height: $playerFooterHeight

	overflow-x: auto
	overflow-y: hidden

	z-index: 1000

	div.control-bar
		display: flex
		flex-direction: row
		justify-content: space-between
		height: 40px
		width: 100%
		margin: auto

		.toggles, .volume-controls
			margin: auto 20px

		.toggles img.icon
			margin-left: 10px
			opacity: 1

			transition: all 0.1s

			&:hover
				opacity: 0.85

		.volume-slider
			margin-right: 10px
			transform: translate(0, -215%)
			margin: auto 0
			height: 3px
			background: white
			-webkit-appearance: none
			appearance: none
			outline: none
			cursor: pointer

		.volume-slider::-webkit-slider-thumb
			-webkit-appearance: none
			width: 12px
			height: 12px
			border-radius: 50%
			background: white

		.volume-slider::-moz-range-thumb
			width: 12px
			height: 12px
			border-radius: 50%
			background: white

		img.icon
			cursor: pointer
			height: 16px

			@media screen and (prefers-color-scheme: dark)
				filter: invert(1)

			&.keyboard
				display: none

				@media only screen and (max-width: $mobileBreakpoint)
					display: inline

	div.user-icons
		display: flex

		width: fit-content

		padding: 0px 40px 40px 40px
		margin: auto

		align-items: center
		justify-content: stretch

		div.user-icon
			width: $userIconSize
			height: $userIconSize

			border-radius: 50%

			&.owner
				box-shadow: 0 0 0 5px $ownerColor

			&.admin
				box-shadow: 0 0 0 5px $adminColor

			&.subscriber
				box-shadow: 0 0 0 5px $subscriberColor

			&.team
				box-shadow: 0 0 0 5px $teamColor

			&.passable
				cursor: pointer

				transition: box-shadow 0.2s ease-in-out

				&:hover
					box-shadow: 0 0 0 5px $secondary

					@media screen and (prefers-color-scheme: dark)
						box-shadow: 0 0 0 5px $primary

			&.offline
				img.user-icon-avatar
					opacity: 0.25

					filter: grayscale(100%)
					-webkit-filter: grayscale(100%)

			&:not(:last-child)
				margin-right: 1.5em

			&.has-control
				div.user-control-indicator
					transform: scale(1)

			img.user-icon-avatar
				height: 100%

				border-radius: 50%

			&:not(.has-control):hover
				div.user-name-wrapper
					bottom: 2.15em

					opacity: 1

			div.user-name-wrapper
				position: absolute

				width: 100px
				bottom: 1.5em

				margin: 0
				box-shadow: 0 0 0px 5px $primary

				font-weight: bold
				text-align: center
				border-radius: 50px

				opacity: 0
				background-color: $secondary

				transition: $softBounceTransition

				p.user-name
					margin: 6px
					color: $primary

					cursor: default

					@media screen and (prefers-color-scheme: dark)
						color: $secondary

				@media screen and (prefers-color-scheme: dark)
					background-color: $primary

					box-shadow: 0 0 0px 5px $secondary

				@media only screen and (max-width: $mobileBreakpoint)
					width: 70px

			div.user-control-indicator
				position: absolute
				display: flex

				width: 40px
				height: 40px
				bottom: 2.15em

				margin-left: 60px
				border-radius: 50%

				background-color: $secondary
				box-shadow: 0 0 0px 6px $primary

				align-items: center

				transform: scale(0)

				justify-content: center
				transition: transform $softBounceTransition

				img.user-control-icon
					height: 23px

					filter: invert(1)

					transition: $softTransitionLong

					&.remove-control
						height: 0

						opacity: 0

					@media screen and (prefers-color-scheme: dark)
						filter: invert(0)

				&.is-interactable
					cursor: pointer

					&:hover
						img.user-control-icon
							&.has-control
								height: 0px

								opacity: 0

							&.remove-control
								height: 23px

								opacity: 1

				@media screen and (prefers-color-scheme: dark)
					background-color: $primary
					box-shadow: 0 0 0px 6px $secondary

				@media only screen and (max-width: $mobileBreakpoint)
					width: 30px
					height: 30px

					margin-left: 40px

					img.user-control-icon
						height: 19px

			@media only screen and (max-width: $mobileBreakpoint)
				width: 70px
				height: 70px

		div.invite-hint
			height: fit-content

			margin-left: .5em

			h3.invite-hint-title
				margin: 0
				margin-bottom: 0.55em

			p.invite-hint-subtitle
				margin: 0
				margin-bottom: 0

			span.hint
				position: absolute
				opacity: 0
				visibility: hidden

				transition: all 0.1s

				&.visible
					opacity: 1
					visibility: visible
					margin-left: 5px

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

	@media only screen and (max-width: $mobileBreakpoint)
		position: relative

		width: 100%
		height: fit-content

		border-bottom: $primaryBorder