.servers
	display: flex
	gap: 0.5em

	& > :not(.recommended)
		// To match the missing recommended label
		padding-bottom: 1em

	& > *
		display: flex
		flex-direction: column
		gap: 0.5em
		border: 2px solid
		border-radius: 0.5em
		padding: 0.5em
		width: 100%
		align-items: center
		text-align: center

		img
			width: 96px
			border-radius: 100%
			border: 2px solid

		.name
			display: flex
			flex-grow: 1
			align-items: center

		.joinButton
			display: inline
			background: seagreen
			color: white
			font: inherit
			font-weight: bold
			border: none
			outline: none
			padding: 0.25em 0.5em 0.25em 0.5em
			border-radius: 2px

			&:disabled, &.disabled
				background: gray

	.recommended
		border-color: mediumseagreen

		.label-wrapper
			height: 0

			.label
				position: relative
				width: fit-content
				border: auto
				bottom: 0px
				background: mediumseagreen
				color: white
				font-weight: bold
				font-size: 0.75em
				text-transform: uppercase
				padding: 0 0.5em 0 0.5em
				border-radius: 2px
				user-select: none