@import 'theme-@{THEME}.less';

#areas {
	.area {
		& > .name {
			display: grid;
			grid-template-columns: 1fr min-content;
			grid-gap: 0px 16px;
			align-items: center;
			padding-left: 16px;
			padding-right: 8px;

			img {
				margin-top: 3px;
				margin-bottom: 4px;
				height: 16px;
			}
		}


		.section.configuration {
			display: grid;
			grid-template-columns: 1fr min-content;
			grid-gap: 0 16px;

			margin-top: 8px;
			margin-bottom: 8px;

			&:last-child {
				margin-bottom: 16px;
			}

			img {
				height: 16px;
			}
		}
	}
}

#services {
	display: grid;
	grid-template-columns: repeat(4, min-content);
	gap: 10px 24px;
	background-color: @bg3;
	width: min-content;
	padding: 16px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	margin-top: 16px;

	.header {
		font-weight: bold;
	}

	div {
		white-space: nowrap;
	}

	img.delete {
		height: 16px;
	}
}