.taf.QueryStatus {
	> .window-content {
		color: var(--query-status-colour);
		background: var(--query-status-background);
	}

	.user-list {
		display: flex;
		flex-direction: column;
		gap: 4px;
		list-style-type: none;
		margin: 0;
		padding: 0;

		li {
			display: flex;
			flex-direction: column;
			margin: 0;
			color: var(--query-status-user-colour);
			background: var(--query-status-user-background);
			border-radius: 4px;
			padding: 4px 8px;

			> .user-summary {
				display: flex;
				flex-direction: row;
				align-items: center;
				/* Same height as the icons used for loading/disconnected */
				height: 35px;
			}

			button {
				color: var(--query-status-user-button-colour);
				background: var(--query-status-user-button-background);

				&:hover {
					background: var(--query-status-user-button-hover-background);
				}

				&:focus-visible {
					border-color: var(--query-status-user-button-focus);
				}
			}
		}
	}

	.control-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;

		button {
			color: var(--query-status-control-colour);
			background: var(--query-status-control-background);

			&:hover {
				background: var(--query-status-control-hover-background);
			}

			&:focus-visible {
				border-color: var(--query-status-control-focus);
			}
		}
	}

	button {
		border: 2px solid transparent;
		outline: none;
	}
}