@mixin bui-scrollbar {
	$bui-scrollbar-width: var(--bui-scrollbar-width, 8px);
	$bui-scrollbar-background: var(--bui-scrollbar-background, rgba(128, 128, 128, 0.02));
	$bui-scrollbar-thumb-color: var(--bui-scrollbar-thumb-color, rgba(128, 128, 128, 0.4));
	$bui-scrollbar-thumb-hover: var(--bui-scrollbar-thumb-hover, rgba(128, 128, 128, 0.6));
	$bui-scrollbar-thumb-active: var(--bui-scrollbar-thumb-active, rgba(128, 128, 128, 0.8));

	.bui-styled-scrollbar {
		scrollbar-width: thin;

		&::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.2);
			background-color: $bui-scrollbar-background;
			border-radius: $bui-scrollbar-width;
		}

		&::-webkit-scrollbar {
			width: $bui-scrollbar-width;
			background-color: $bui-scrollbar-background;
		}

		&::-webkit-scrollbar-thumb {
			background-color: $bui-scrollbar-thumb-color;
			border-radius: $bui-scrollbar-width;
			&:hover {
				background-color: $bui-scrollbar-thumb-hover;
			}
			&:active {
				background-color: $bui-scrollbar-thumb-active;
			}
		}

		&.ng-scrollbar {
			--scrollbar-hover-size: #{$bui-scrollbar-width};
			--scrollbar-thumb-color: #{$bui-scrollbar-thumb-color};
			--scrollbar-thumb-hover-color: #{$bui-scrollbar-thumb-hover};
			--scrollbar-border-radius: #{$bui-scrollbar-width};
		}
	}
}