/*
 * Material design specific styles.
*/

.cyclos-user-map.material,
.cyclos-user-list.material {
	// Show the entire view in a gray box.
	background-color: var(--gray);
	padding: 2em;

	// No border around the options.
	.user-options {
		border: none;
		padding: 0;
	}

	// Use gray colors for the search button.
	.search button {
		background-color: var(--gray-dark-2);
		color: #fff;

		&:hover {
			background-color: var(--gray-dark);
		}

		&:focus {
			box-shadow: 0 0 0 2px var(--gray-3);
		}

		&:active {
			background-color: var(--gray-dark-2);
		}
	}
}

.cyclos-user-list.material {
	// Distinguish user cards with a box shadow.
	.cyclos-user {
		border: none;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		background-color: var(--white);
		border-radius: 4px;

		&:hover {
			box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
		}
	}

	// Show usernames as bold gray centered text.
	.name {
		color: var(--gray-dark);
		font-weight: 700;
		text-align: center;
		padding: 1em 2em 0;
	}

	// Use a blue color for the circle used for users without a logo.
	.cyclos-no-logo {
		background-color: var(--blue);
	}
}