@mixin scrollbarBase() {
	padding-right: 10px;
	box-sizing: border-box;
	overflow-y: scroll;
	&:hover {
		padding-right: 0px;
	}
	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 10px;
		border-radius: 5px;
		height: 10px;
		transition: background-color 1s;
		display: none;
	}
	&:hover {
		&::-webkit-scrollbar {
			display: block;
		}
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 0.3);
	}

	&::-webkit-scrollbar-thumb:hover {
		background-color: rgba(255, 255, 255, 0.4);
	}

	&::-webkit-scrollbar-thumb:window-inactive {
		background-color: rgba(255, 255, 255, 0.3);
	}
}
@mixin scrollbarBaseSlinder() {
	padding-right: 4px;
	box-sizing: border-box;
	overflow-y: scroll;
	&:hover {
		padding-right: 0px;
	}
	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 4px;
		border-radius: 5px;
		height: 10px;
		transition: background-color 1s;
		display: none;
	}
	&:hover {
		&::-webkit-scrollbar {
			display: block;
		}
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 0.3);
	}

	&::-webkit-scrollbar-thumb:hover {
		background-color: rgba(255, 255, 255, 0.4);
	}

	&::-webkit-scrollbar-thumb:window-inactive {
		background-color: rgba(255, 255, 255, 0.3);
	}
}

@mixin scrollbarBaseSlinderHorizontal() {
	padding-bottom: 4px;
	box-sizing: border-box;
	overflow-x: scroll;
	&:hover {
		padding-bottom: 0px;
	}
	&::-webkit-scrollbar {
		-webkit-appearance: none;
		height: 4px;
		border-radius: 5px;
		width: 10px;
		transition: background-color 1s;
		display: none;
	}
	&:hover {
		&::-webkit-scrollbar {
			display: block;
		}
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 0.3);
	}

	&::-webkit-scrollbar-thumb:hover {
		background-color: rgba(255, 255, 255, 0.4);
	}

	&::-webkit-scrollbar-thumb:window-inactive {
		background-color: rgba(255, 255, 255, 0.3);
	}
}
@mixin scrollbarDark() {
	padding-right: 10px;
	box-sizing: border-box;
	overflow-y: scroll;
	&:hover {
		padding-right: 0px;
	}
	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 10px;
		border-radius: 5px;
		height: 10px;
		transition: background-color 1s;
		display: none;
	}
	&:hover {
		&::-webkit-scrollbar {
			display: block;
		}
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: rgba(0, 0, 0, 0.3);
	}

	&::-webkit-scrollbar-thumb:hover {
		background-color: rgba(0, 0, 0, 0.4);
	}

	&::-webkit-scrollbar-thumb:window-inactive {
		background-color: rgba(0, 0, 0, 0.3);
	}
}

@mixin scrollbarDarkSlinder() {
	padding-right: 4px;
	box-sizing: border-box;
	overflow-y: scroll;
	&:hover {
		padding-right: 0px;
	}
	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 4px;
		border-radius: 5px;
		height: 10px;
		transition: background-color 1s;
		display: none;
	}
	&:hover {
		&::-webkit-scrollbar {
			display: block;
		}
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: rgba(0, 0, 0, 0.3);
	}

	&::-webkit-scrollbar-thumb:hover {
		background-color: rgba(0, 0, 0, 0.4);
	}

	&::-webkit-scrollbar-thumb:window-inactive {
		background-color: rgba(0, 0, 0, 0.3);
	}
}
:export {
	scrollbarBase: scrollbarBase;
	scrollbarDark: scrollbarDark;
}
