dtx-data-selections {
	display: flex;
	height: 100vh;
	padding: 80px 2px 0 12px;
}

dtx-data-selections-details {
	.row { gap: 12px; }

	#data-selections-filters {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
		width: calc(700px - 32px);
		padding: 0 0 12px 12px;
		border-radius: 12px;
		border: 1px solid var(--border);

		h2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-bottom: -12px;
			padding-left: 4px;
			transition: opacity .2s;
		}
	}

	.filter {
		display: inline-flex;
		align-items: center;
		border-radius: 12px;
		background: var(--border);
		overflow: hidden;
		transition: width .2s, opacity .2s;

		&.collapse { width: 0; opacity: 0; }

		dtx-select {
			width: fit-content;
			min-height: 0;

			label { display: none; }
			.trigger {
				position: static;
				width: fit-content;
				padding: 8px 12px;
			}
			select-picker {
				width: max-content;
				margin-top: 8px;
			}
			&::after { display: none; }
		}
		dtx-select.field .trigger { padding-right: 0; }
		dtx-select.operator * { color: var(--text-light); }
		dtx-select.value dtx-option:has(input) { padding-block: 3px; }
		dtx-select .trigger:empty::before { content: '. . .'; }

		.conjunction {
			padding: 0 8px;
			color: var(--text-light);
		}

		input:not(.select-picker-search) {
			field-sizing: content;
			min-width: 32px;
			height: 40px;
			border: none;
			background: transparent;
			outline: none;
			transition: .2s;
		}

		input:is([type="date"], [type="time"]) { width: 100px; }

		dtx-button {
			width: 40px;
			color: var(--background-light);
			outline-offset: -2px;
		}
	}
}

dtx-data-categorization-details {
	.row { gap: 2px; }

	#templates-select, #templates-select .trigger { border-radius: 12px 4px 4px 12px; }
	.select-actions {
		display: flex;
		gap: 2px;
		padding: 1px;
		border-radius: 4px 12px 12px 4px;
		background: var(--border);
	}

	[icon="delete"], [icon="edit"] {
		transition: .2s;
		&.collapsed { width: 0; padding-inline: 0; }
	}
}