/** @format */

.location_services_container {
	display: grid;
	gap: var(--universal-gap);
}
.location_children_service_container {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--universal-gap) / 2);
}
.location_services_legend_container,
.location_parent_service {
	background-color: var(--color-white);
	border-radius: var(--rounded-corners-small);
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--universal-gap) / 4);
	padding: calc(var(--universal-gap) / 2);
}

.location_parent_service_name {
	width: 100%;
	font-size: var(--fs-2);
}

.legend_decoration {
	border-radius: var(--rounded-corners-small);
	border: solid 1px;
	border-color: var(--color-grey);
	color: var(--color-grey);
	height: fit-content;
	width: max-content;
	padding: 0.2em 0.5em;
}

.legend_decoration > * {
	font-size: var(--fs-3);
	padding: calc(var(--universal-gap) / 12) calc(var(--universal-gap) / 4);
}

.legend_decoration.locally {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.legend_decoration.regionally {
	border-color: var(--color-black);
	color: var(--color-black);
}

.legend_decoration.wiegel-group {
	/* uses and is basically the default */
}
.location_services_legend_container {
	background-color: var(--color-white-blue);
	padding: 0;
}