// Don't style scrollbar for touch device
// Since the scrollbar will stay visible if styled
// Besides scrollbar is subtle enough on touch devices
@media ( hover: hover ) {
	* {
		scrollbar-width: thin;
	}

	::-webkit-scrollbar {
		width: 14px;
	}

	::-webkit-scrollbar-track {
		background: transparent;
		transition: var( --transition-hover );
		transition-property: background;

		&:hover {
			background: var( --background-color-quiet--hover );
		}
	}

	::-webkit-scrollbar-thumb {
		border: 5px solid transparent;
		border-radius: var( --border-radius--large );
		background-clip: content-box;
		box-shadow: inset 0 0 0 10px var( --background-color-icon );

		&:hover {
			box-shadow: inset 0 0 0 10px var( --background-color-icon--hover );
		}

		&:active {
			box-shadow: inset 0 0 0 10px var( --background-color-icon--active );
		}
	}

	::-webkit-scrollbar-button {
		display: none;
		width: 0;
		height: 0;
	}

	::-webkit-scrollbar-corner {
		background-color: transparent;
	}
}