/// Styles for an 'OverflowTable'
/// @require _oTableContainer
/// @require _oTableWrapper
/// @access private
@mixin _oTableResponsiveOverflow {
	@include _oTableOverflowControlsOverlay;
	@include _oTableOverflowFadeOverlay;
}

/// Styles for controls which overlay the table. Such as scroll forward/back buttons,
/// and a "show more" button to expand/contract a table with many items.
@mixin _oTableOverflowControlsOverlay {
	.o-table-overflow-control-overlay {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;

		.o-table-control {
			display: inline-block;
			pointer-events: all;
			transition: 1s opacity ease-in-out;
		}

		.o-table-control--expander {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			button {
				@include oPrivateButtonsContent(
					(
						'type': 'primary',
						'size': 'big',
					)
				);
				width: 100%;
				border-radius: 0;
			}
		}

		.o-table-control--forward,
		.o-table-control--back {
			@supports (pointer-events: none) {
				position: absolute;
				top: calc(50% - 20px);
				transition: opacity 0.3s $o-pf-visual-effects-timing-fade;
			}
			z-index: 1;
		}

		.o-table-control--back {
			left: 0; //absolute
			float: left; //sticky
			margin: 0 10px;
			button {
				@include oPrivateButtonsContent(
					$opts: (
						'type': 'primary',
						'icon': 'chevron-left',
						'size': 'big',
						'icon-only': true,
					)
				);
			}
		}

		.o-table-control--forward {
			right: 0; //absolute
			float: right; //sticky
			margin: 0 10px;
			button {
				@include oPrivateButtonsContent(
					$opts: (
						'type': 'primary',
						'icon': 'chevron-right',
						'size': 'big',
						'icon-only': true,
					)
				);
			}
		}

		.o-table-control--hide {
			opacity: 0;
			// ensure buttons/links within a table
			// are not obscured by table controls
			pointer-events: none;
		}

		.o-table-control--sticky {
			position: sticky;
		}
	}

	.o-table-overflow-control-overlay--arrow-dock {
		// Create area left/right for arrows to scroll into ("dock").
		&:after,
		&:before {
			position: absolute;
			content: '';
			bottom: 0;
			height: 44px;
			pointer-events: none;
			border-color: oPrivateFoundationGet(
				'_o3-button-primary-standard-background'
			);
			background-color: oPrivateFoundationGet(
				'_o3-button-primary-standard-background'
			);
			border-style: solid;
			width: 1px;
		}

		&:before {
			left: 0;
			border-width: 0 44px 0 9px;
		}

		&:after {
			right: 0;
			border-width: 0 9px 0 44px;
		}

		// Make more control leave space for arrows to dock left/right.
		.o-table-control--expander {
			left: 51px;
			right: 51px;
		}

		// A modifier class which forces arrows to "dock" at the bottom of the overlay.
		.o-table-control--dock {
			top: auto;
			bottom: 0;
		}
	}
}

/// Styles to show scroll and expander fade out.
@mixin _oTableOverflowFadeOverlay {
	.o-table-overflow-fade-overlay {
		@supports (pointer-events: none) {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			pointer-events: none;
		}
	}

	// Show horizontal fade when the table is scrolled.
	.o-table-overflow-fade-overlay--scroll {
		@if _oTableGet('table-background') {
			background: linear-gradient(
					to right,
					_oTableGet('table-background') 2px,
					rgba(_oTableGet('table-background'), 0) var(--o-table-fade-from-start)
				),
				linear-gradient(
					to left,
					_oTableGet('table-background') 2px,
					rgba(_oTableGet('table-background'), 0) var(--o-table-fade-from-end)
				);
		}
	}

	// Show vertical fade when the table is contracted.
	.o-table-container--contracted .o-table-overflow-fade-overlay:after {
		@if _oTableGet('table-background') {
			content: '';
			position: absolute;
			height: 80px;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(
				to top,
				_oTableGet('table-background') 30px,
				rgba(_oTableGet('table-background'), 0) 80px
			);
			pointer-events: none;
		}
	}
}