_players-connected.scss

#players {
	background-color: color("background", $global-background-opacity-players);
	background-image: $global-image-background;
	border: b("border");
	border-radius: $global-border-radius-default;
	box-shadow: none;
	transition: t(opacity, "link");

	@include layout {
		display: block;
		margin: $global-space-sm;
		padding: 0;
		pointer-events: all;
		z-index: z("fixed");

		&.hidden {
			display: none;
		}
	}

	@include layout(compact) {
		width: to-rem(168px);
	}

	@include layout-subtle {
		opacity: $global-subtle-opacity;

		&:hover {
			opacity: 1;

			> h3 {
				border-width: 1px;
			}

			> ol {
				max-height: to-rem(700px);
				overflow: visible;
				padding: $global-space-sm;
			}
		}
	}

	@include layout-players {
		display: none;
	}

	> h3 {
		border-block-end: b("border");
		border-radius: $global-border-radius-default $global-border-radius-default 0 0;
		color: color("text-lightest");
		transition: t(color, "link");

		@include layout {
			align-items: center;
			cursor: pointer;
			display: flex;
			font-size: $global-font-size-md;
			font-weight: normal;
			margin: 0;
			padding: $global-space-sm;
			position: relative;
			text-transform: uppercase;
		}

		@include layout-subtle {
			border-width: 0;
		}

		&:hover,
		&:active {
			background-color: color("primary");
			color: color("text-lightest");
		}

		.players-mode {
			color: inherit;

			@include layout {
				flex: 1 1 auto;
				font-size: $global-font-size-lg;
				text-align: right;
				position: relative;
			}
		}

		> i {
			@include layout {
				position: relative;
			}

			&:first-of-type {
				@include layout {
					margin-inline-start: 0;
					margin-inline-end: $global-space-sm;
				}
			}

			&:last-of-type {
				@include layout {
					margin-inline-start: $global-space-sm;
					margin-inline-end: 0;
				}
			}
		}
	}

	> ol {
		@include layout {
			@extend %reset-list;
			padding: $global-space-sm;
		}

		@include layout-subtle {
			max-height: 0;
			overflow: hidden;
			padding: 0;
		}

		.player {
			@include layout {
				align-items: center;
				border: none;
				display: flex;
				flex-wrap: nowrap;
				line-height: initial;
				margin: 0;
				padding: $global-space-xs 0;
				position: relative;
				width: 100%;
			}

			&.context {
				.player-name {
					color: color("primary");
					text-shadow: none;
				}
			}
		}

		.player-name {
			color: color("text-lightest");
			text-shadow: none;

			@include layout {
				@include ellipsis;
				flex: 1 1 auto;
				position: relative;
				word-break: break-all;
			}

			&.self {
				color: color("text-lightest");
			}
		}

		.player-active {
			@include layout {
				@include size(to-rem(8px));
				border-radius: 50%;
				flex: 0 0 auto;
				margin: 0;
				margin-inline-end: $global-space-sm;
				position: relative;
			}

			&.active {
				box-shadow: 0 1px 2px 0 color("black", 0.3);
			}
		}
	}
}