/// Outputs button tabs.
///
/// @access private
@mixin _oTabsButtonTabs($button-tabs, $sizes) {
	.o-tabs--buttontabs[data-o-tabs--js] {

		&[role='tablist'] {
			display: flex; // prevent spacing between tabs
			border-bottom: 1px solid;
		}

		// Include tab button themes.
		@each $button-tabs in $button-tabs {
			$button-type: map-get($button-tabs, 'type');
			$button-theme: map-get($button-tabs, 'theme');

			$theme-selector: '.o-tabs--#{$button-type}';
			@if $button-theme {
				$theme-selector: selector-append(
						$theme-selector,
						'.o-tabs--#{$button-theme}'
				);
			}


			&#{$theme-selector} {
				&[role='tablist'] {
					// Find a tab list border colour based on standard button colours.
					$button-background: oPrivateFoundationGet(
							'_o3-button-#{$button-type}-#{if($button-theme, $button-theme, 'standard')}-background'
					);
					$button-border: oPrivateFoundationGet(
							'_o3-button-#{$button-type}-#{if($button-theme, $button-theme, 'standard')}-border'
					);
					$tablist-border: if(
							$button-border and opacity($button-border) != 0,
							$button-border,
							$button-background
					);

					border-color: $tablist-border;
				}

				[role='tab'] {
					@include oPrivateButtonsContent(
							(
								'type': $button-type,
								'theme': $button-theme,
							)
					);
					border-radius: 0;
				}

				[role='tab']:first-of-type {
					border-top-left-radius: oPrivateFoundationGet('o3-border-radius-1');
				}

				[role='tab']:last-of-type {
					border-top-right-radius: oPrivateFoundationGet('o3-border-radius-1');
				}

				// Include tab button sizes.
				@if index($sizes, 'big') {
					&.o-tabs--big [role='tab'] {
						@include oPrivateButtonsContent(
								(
									'type': $button-type,
									'theme': $button-theme,
									'size': 'big',
								)
						);
						border-radius: 0;
					}

					&.o-tabs--big [role='tab']:first-of-type {
						border-top-left-radius: oPrivateFoundationGet('o3-border-radius-1');
					}

					&.o-tabs--big [role='tab']:last-of-type{
						border-top-right-radius: oPrivateFoundationGet('o3-border-radius-1');
					}
				}
			}
		}

		[role='tab'],
		&.o-tabs--big [role='tab'] {
			margin-bottom: -1px;

			& + [role='tab'] {
				margin-right: -1px;
			}
		}
	}
}
