$scrollbar-track-size: 4px;
$scrollbar-track-size-hover: 8px;
$scrollbar-track-size-outline: 2px;

.scrollable {
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;

	&:focus {
		outline: 0;
	}

	scrollbar-width: none;
	-ms-overflow-style: none;

	&::-webkit-scrollbar {
		width: 0;
	}

	.scrollbar-track {
		background: $scrollbar-track-color;
		width: $scrollbar-track-size;
		border-radius: 2px;
		height: 100%;
		position: absolute;
		right: 2px;
		top: 0;
		opacity: 0;
		z-index: 999;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: -$scrollbar-track-size-outline;
			bottom: 0;
			left: -$scrollbar-track-size-hover + $scrollbar-track-size - $scrollbar-track-size-outline;
		}

		&.is-active {
			opacity: 1;
		}

		&:hover {
			width: $scrollbar-track-size-hover;

			.scrollbar-thumb {
				width: $scrollbar-track-size-hover;
			}
		}
	}

	.scrollbar-thumb {
		background: $scrollbar-thumb-color;
		border-radius: 2px;
		width: $scrollbar-track-size;
		position: absolute;
		height: 0;
		right: 0;
		opacity: .5;

		&:hover {
			width: $scrollbar-track-size-hover;
			opacity: 1;
		}
	}

	@if $ui-transitions {
		.scrollbar-track {
			transition: opacity $ui-transition-duration ease-out 2s,
			width $ui-transition-duration ease-out 2s;

			&.is-active {
				transition: opacity $ui-transition-duration ease-out,
				width $ui-transition-duration ease-out 2s;
			}

			&:hover {
				transition: opacity $ui-transition-duration ease-out,
				width $ui-transition-duration ease-out;

				.scrollbar-thumb {
					transition: opacity $ui-transition-duration ease-out,
					width $ui-transition-duration ease-out;
				}
			}
		}

		.scrollbar-thumb {
			transition: opacity $ui-transition-duration ease-out,
			width $ui-transition-duration ease-out 2s;
		}
	}
}
