/* wc.ui.tabset.scss */
@import 'tabset_vars';

.wc-tabset {
	@include flex($direction: column);
}

[role='tablist'] {
	@include flex; // the tablist display model
	position: relative;
	top: $border-width;

	> [role] + [role] {
		margin-left: $hgap-small;
	}

	// ACCORDION
	&[aria-multiselectable] {
		@include flex-direction(column);

		> [role] + [role] {
			@include border($pos:top, $width: 0);
			margin-left: 0;
		}
	}
}

[role='tab'] {
	@include fit-content($what: min-height);
	@include padded-box;
	overflow: hidden;

	// accordion tabs are expanded, others are aria-selected.
	&[aria-selected] {
		@include wc-ui-tabset-top-border-radius;
	}

	&[aria-selected='true'] {
		@include border($pos: bottom, $width: 0);
	}
}

[role='tabpanel'] {
	@include padded-box;
	@include flex-grow(1);

	&[aria-busy='true'] {
		min-height: 16px;
	}
}

// only style left and right tabsets when we have a reasonable sized viewport.
@include respond($size: 'not-small') {
	.wc-tabset {
		&.wc_left {
			@include flex-direction(row);
		}

		&.wc_right {
			@include flex-direction(row-reverse);
		}
	}

	[role='tablist'] {
		.wc_left > &,
		.wc_right > & {
			@include flex-direction(column);
			max-width: $wc-ui-tabset-left-right-tab-width;
			top: 0;

			> [role] + [role] {
				margin-left: 0;
				margin-top: $vgap-small;
			}

			> [aria-selected='true'] {
				@include border($pos: bottom);
			}
		}

		.wc_left > & {
			left: $border-width;

			[role='tab'] {
				@include wc-ui-tabset-left-border-radius;

				&[aria-selected='true'] {
					@include border($pos: right, $width: 0);
				}
			}

		}

		.wc_right & {
			right: $border-width;

			[role='tab'] {
				@include wc-ui-tabset-right-border-radius;
				text-align: right;

				&[aria-selected='true'] {
					@include border($pos: left, $width: 0);
				}
			}
		}
	}
}
