@import "/ui/styles/_theme.scss";

MenuPlayerList {
	flex-direction: column;
	gap: 4px;
	flex-grow: 1;

	.player-row {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 12px 16px;
		background-color: $panel-glass-mid;
		border: 1px solid $border;
		border-left: 3px solid $secondary-strong;
		transition: background-color 0.12s ease-out, border-color 0.12s ease-out;

		.indicator {
			width: 12px;
			height: 12px;
			background-color: $gray-500;
			flex-shrink: 0;
			transition: background-color 0.12s ease-out;
		}

		.player-name {
			font-family: $font-primary;
			font-size: 22px;
			font-weight: 700;
			letter-spacing: 1px;
			color: $text;
			text-transform: uppercase;
		}

		.host-icon { color: $accent; }

		.grow { flex-grow: 1; }

		.status-badge {
			font-family: $font-primary;
			font-size: 13px;
			font-weight: 800;
			letter-spacing: 3px;
			text-transform: uppercase;
			padding: 4px 10px;
			border: 1px solid transparent;
			color: $text;

			&.ready {
				border-color: $success-line;
				background-color: $success-soft;
			}

			&.waiting {
				border-color: $primary-line;
				background-color: $primary-soft;
			}
		}

		&.ready {
			border-left-color: $success;
			background-color: $success-soft;

			.indicator {
				background-color: $success;
				box-shadow: 0 0 12px rgba(138, 176, 96, 0.8);
			}
		}

		&.host {
			border-left-color: $accent;
		}
	}
}