/* ══════════════════════════════════════════════════ *
 * MARK: 0. Setup
 * ────────────────────────────────────────────────── */
@property --_max-column-count {
	syntax: "<integer>";
	initial-value: 3;
	inherits: false;
}

@property --_min-row-height {
	syntax: "<length>";
	initial-value: 5px;
	inherits: true;
}

@property --_device-count {
	syntax: "<integer>";
	initial-value: 1;
	inherits: true;
}

@property --_label-count {
	syntax: "<integer>";
	initial-value: 2;
	inherits: true;
}

@property --_column-gap {
	syntax: "<length>";
	initial-value: 5px;
	inherits: true;
}

@property --_column-scroll-indent {
	syntax: "<length>";
	initial-value: 25px;
	inherits: true;
}


/* ══════════════════════════════════════════════════ *
 * MARK: 1. Table Wrap
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 1.1 Container #═#═#═#═#═# */
div.cvh--device-details-selection-ctn {
	/* Variables */
	--_column-count: min(var(--_device-count), var(--_max-column-count));


	display: grid;
	grid-template-areas: "labels devices";
	grid-template-columns: minmax(min(50%, 150px), 1fr) repeat(var(--_column-count), minmax(200px, 1fr));
	grid-template-rows: repeat(var(--_label-count), minmax(var(--_min-row-height), auto));
	column-gap: var(--_column-gap);
}


/* #═#═#═#═#═# 1.2 Labels Column #═#═#═#═#═# */
div.cvh--device-details-selection-ctn > div.cvh--device-details-labels-ctn {
	display: grid;
	grid-template-rows: subgrid;
	grid-column: labels;
	grid-row: 1 / -1;
}


/* #═#═#═#═#═# 1.4 Device Column #═#═#═#═#═# */
div.cvh--device-details-selection-ctn > div.cvh--device-details-devices-ctn {
	--_gap-width: calc(var(--_column-gap) * (var(--_column-count) - 1));
	--_column-width: calc((100% - var(--_gap-width) - var(--_column-scroll-indent)) / var(--_column-count));

	display: grid;
	grid-template-columns: repeat(var(--_device-count), var(--_column-width));
	grid-template-rows: subgrid;
	grid-column: devices-start / -1;
	grid-row: 1 / -1;
	column-gap: inherit;
	overflow-x: auto;

	& > div {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: subgrid;
		grid-row: 1 / -1;
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: 2. Table Items
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 2.1 Items #═#═#═#═#═# */
div.cvh--tabel-item {
	padding: var(--cvh-space-s) var(--cvh-space-m);
}

div.cvh--tabel-item:not(.cvh--tabel-item-link-ctn):nth-child(even) {
	background-color: var(--primary-ultra-light);
}


/* #═#═#═#═#═# 2.2 Labels #═#═#═#═#═# */
div:is(.cvh--device-details-labels-ctn , .cvh--device-details-devices-ctn) div.cvh--tabel-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: nowrap;
}

div.cvh--device-details-labels-ctn > div:first-child p,
div.cvh--device-details-devices-ctn > div > div:first-child p {
	font-size: var(--text-l);
}

div.cvh--device-details-devices-ctn > div > div:first-child p {
	color: var(--primary);
}


/* #═#═#═#═#═# 2.3 Devices Data #═#═#═#═#═# */
div.cvh--device-details-devices-ctn div.cvh--tabel-item {
	align-items: center;
}


/* ══════════════════════════════════════════════════ *
 * MARK: 3. Scroll Snapping
 * ────────────────────────────────────────────────── */
div.cvh--device-details-devices-ctn {
	scroll-snap-type: x mandatory;
}

div.cvh--device-details-devices-ctn > div:not(:last-child) {
	scroll-snap-align: start;
}

div.cvh--device-details-devices-ctn > div:last-child {
	scroll-snap-align: end;
}


/* ══════════════════════════════════════════════════ *
 * MARK: 4. Media Query
 * ────────────────────────────────────────────────── */
@media screen and (width < 992px) {
	div.cvh--device-details-selection-ctn {
		--_max-column-count: 2;
	}
}

@media screen and (width < 768px) {
	div.cvh--device-details-selection-ctn {
		--_max-column-count: 1;
		--_column-width: calc((100% - var(--_gap-width) - (var(--_column-scroll-indent) * 2)) / var(--_column-count));
	}

	div.cvh--device-details-devices-ctn > div:not(:first-child, :last-child) {
		scroll-snap-align: center;
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: 5. Color Scheming
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 5.1 Greenline #═#═#═#═#═# */
[data-color-scheme="greenline"] div.cvh--tabel-item:not(.cvh--tabel-item-link-ctn):nth-child(even) {
	color: #fff;
}