.editable-field {
	>div {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.field-editing {
		display: none;
	}
}

.icon-button {
	all: unset;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 3px;

	height: 15px;
	aspect-ratio: 1/1;

	font-weight: bold;

	color: #555;

	border-radius: 5px;

	&:hover {
		background-color: rgb(212, 212, 212);
	}

	&:not(:has(i)) {
		padding: 3px 6px;
	}

	&.text {
		padding: 3px 6px;
	}

	&:has(.fa-times),
	&.cancel {
		color: white;
		background-color: red;

		&:hover {
			background-color: darkred;
		}
	}

	&:has(.fa-check),
	&.confirm {
		color: white;
		background-color: limegreen;

		&:hover {
			background-color: green;
		}
	}

	&.gray {
		color: white;
		background-color: gray;

		&:hover {
			background-color: #555;
		}
	}
}

.setup-user-whitelist {
	display: flex;
	flex-direction: column;

	gap: 12px;
	
	.user-select {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.user-list {
		display: flex;
		flex-direction: column;
		gap: 6px;

		.user-item {
			display: flex;
			align-items: center;
			gap: 6px;
		}
	}
}

.statusref:has(#user_access_info) {
	display: flex;
	gap: 12px;
}

#user_access_info {
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 4px;

	gap: 3px;
	
	border-radius: 5px;

	color: white;

	font-weight: bold;
	
	&:has(.fa-user-tie) {
		background-color: rgb(226, 168, 52);
	}

	&:has(.fa-cog) {
		background-color: gray;
	}

	&:has(.fa-eye) {
		background-color: rgb(65, 199, 229);
	}
}
/* Enrollment block of the setup page (admin/setup.php) */
.sociadmin-enrollment {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 8px;
}

.sociadmin-enrollment-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 8px;
}

.sociadmin-enrollment-state {
	flex-basis: 100%;
}

.sociadmin-enrollment-help {
	flex-basis: 100%;
}

/* Closed instance indicator (top right menu) */
.sociadmin-closed-indicator {
	padding: 0;
	padding-right: 3px;

	color: red;
}

/* Support access link on the login page */
.sociadmin-support-link {
	position: absolute;
	bottom: 0;
	right: 0;

	background-color: #ddd;
	
	padding: 8px;
	padding-left: 12px;
	padding-top: 12px;

	border-top-left-radius: 5px;

	color: #666;

	font-size: 18pt;
}
.sociadmin-support-link:visited {
	color: #666;
}
.sociadmin-support-link:hover {
	color: #444;
}