/*
 * Scrollbar visibili e personalizzate nelle aree che scorrono: tabelle
 * DataTables (in orizzontale), tabelle larghe e albero delle categorie.
 *
 * File a sé come responsive.css: il build SCSS del tema gira solo da VSCode.
 * orderz.scss nasconde le scrollbar di tutti i div e ul (scrollbar-width:
 * none e ::-webkit-scrollbar display: none): qui le riattivo solo dove
 * servono, altrimenti su schermi piccoli non si capisce che c'è altro.
 *
 * Chrome ed Edge (dalla 121) ignorano gli pseudo-elementi ::-webkit-scrollbar
 * se scrollbar-width o scrollbar-color non sono "auto": per questo li riporto
 * ad auto e uso le proprietà standard solo dove ::-webkit-scrollbar non
 * esiste (Firefox).
 */

@media screen {
	/* _ui.scss usa overflow-y: scroll, che mostra la traccia anche quando
	   le categorie ci stanno tutte: la barra deve comparire solo se serve. */
	.category-tree-wrapper,
	.category-tree-wrapper ul.sub-menu {
		overflow-y: auto;
	}

	div.dt-container div.dt-layout-table > div.dt-layout-cell,
	.orderz-table-scroll,
	.category-tree-wrapper,
	.category-tree-wrapper ul.sub-menu {
		scrollbar-width: auto;
		scrollbar-color: auto;
	}

	div.dt-container div.dt-layout-table > div.dt-layout-cell::-webkit-scrollbar,
	.orderz-table-scroll::-webkit-scrollbar,
	.category-tree-wrapper::-webkit-scrollbar,
	.category-tree-wrapper ul.sub-menu::-webkit-scrollbar {
		display: block;
		width: 1.2rem;
		height: 1.2rem;
	}

	div.dt-container div.dt-layout-table > div.dt-layout-cell::-webkit-scrollbar-track,
	.orderz-table-scroll::-webkit-scrollbar-track,
	.category-tree-wrapper::-webkit-scrollbar-track,
	.category-tree-wrapper ul.sub-menu::-webkit-scrollbar-track {
		background-color: #eef2f6;
		border-radius: 0.6rem;
	}

	/* Il bordo trasparente stacca il cursore dai lati della traccia. */
	div.dt-container div.dt-layout-table > div.dt-layout-cell::-webkit-scrollbar-thumb,
	.orderz-table-scroll::-webkit-scrollbar-thumb,
	.category-tree-wrapper::-webkit-scrollbar-thumb,
	.category-tree-wrapper ul.sub-menu::-webkit-scrollbar-thumb {
		background-color: rgba(80, 91, 164, 0.45);
		border: 0.3rem solid transparent;
		border-radius: 0.6rem;
		background-clip: padding-box;
	}

	div.dt-container div.dt-layout-table > div.dt-layout-cell::-webkit-scrollbar-thumb:hover,
	.orderz-table-scroll::-webkit-scrollbar-thumb:hover,
	.category-tree-wrapper::-webkit-scrollbar-thumb:hover,
	.category-tree-wrapper ul.sub-menu::-webkit-scrollbar-thumb:hover {
		background-color: rgba(80, 91, 164, 0.75);
	}

	/* Un bordo trasparente lato contenuto separa la barra dalla lista (o
	   dalla tabella) senza togliere spazio quando la barra non c'è. */
	.category-tree-wrapper::-webkit-scrollbar,
	.category-tree-wrapper ul.sub-menu::-webkit-scrollbar {
		width: 1.8rem;
	}

	.category-tree-wrapper::-webkit-scrollbar-track,
	.category-tree-wrapper ul.sub-menu::-webkit-scrollbar-track {
		border-left: 0.6rem solid transparent;
		background-clip: padding-box;
	}

	.category-tree-wrapper::-webkit-scrollbar-thumb,
	.category-tree-wrapper ul.sub-menu::-webkit-scrollbar-thumb {
		border-left-width: 0.9rem;
	}

	div.dt-container div.dt-layout-table > div.dt-layout-cell::-webkit-scrollbar,
	.orderz-table-scroll::-webkit-scrollbar {
		height: 1.8rem;
	}

	div.dt-container div.dt-layout-table > div.dt-layout-cell::-webkit-scrollbar-track,
	.orderz-table-scroll::-webkit-scrollbar-track {
		border-top: 0.6rem solid transparent;
		background-clip: padding-box;
	}

	div.dt-container div.dt-layout-table > div.dt-layout-cell::-webkit-scrollbar-thumb,
	.orderz-table-scroll::-webkit-scrollbar-thumb {
		border-top-width: 0.9rem;
	}

	div.dt-container div.dt-layout-table > div.dt-layout-cell::-webkit-scrollbar-corner,
	.orderz-table-scroll::-webkit-scrollbar-corner,
	.category-tree-wrapper::-webkit-scrollbar-corner,
	.category-tree-wrapper ul.sub-menu::-webkit-scrollbar-corner {
		background-color: transparent;
	}

	@supports not selector(::-webkit-scrollbar) {
		div.dt-container div.dt-layout-table > div.dt-layout-cell,
		.orderz-table-scroll,
		.category-tree-wrapper,
		.category-tree-wrapper ul.sub-menu {
			scrollbar-width: thin;
			scrollbar-color: rgba(80, 91, 164, 0.45) #eef2f6;
		}
	}
}