@import '../styles/variables.less';

.scrollbar {
	background: inherit;
	display: flex;
	border-color: transparent;
	visibility: visible;
	opacity: 1;
	flex: none;

	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transition: opacity 0.1s linear;
	-moz-transition: opacity 0.1s linear;
	-webkit-transition: opacity 0.1s linear;

	&.vertical {
		flex-direction: column;
	}

	&.horizontal {
		:global(.enact-locale-right-to-left) & {
			// Flip the entire bar horizontally in RTL mode, and force it to remain in LTR.
			direction: ltr;
			transform: scaleX(-1);
		}
	}

	&.corner {
		-webkit-padding-end: @moon-icon-button-small-size;

		:global(.enact-text-large) & {
			-webkit-padding-end: @moon-icon-button-small-size-large;
		}
	}

	/* ScrollButton */
	.scrollbarButtonNoCompositeLayer {
		&,
		&:before,
		&:after,
		div,
		span {
			will-change: auto;
		}

		&:before {
			content: none;
		}

		div,
		span {
			-webkit-transform: initial;
			transform: initial;
		}
	}

	.scrollButton {
		.scrollbarButtonNoCompositeLayer;
		background-color: transparent;
		margin: 0;
	}

	/* ScrollThumb */
	.thumbShown {
		opacity: 1;
	}
}
