/* wc.ui.tabset.scss */
@import 'tabset-mixins';

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

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

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

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

		> [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;
	}
}


@include respond-not-small {
	// only style left and right tabsets when we have a reasonable sized viewport.

	.wc-tabset-type-left {
		@include flex-direction(row);
	}

	.wc-tabset-type-right {
		@include flex-direction(row-reverse);
	}

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

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

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

		.wc-tabset-type-left > & {
			left: $wc-border-width;

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

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

		.wc-tabset-type-right > & {
			right: $wc-border-width;

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

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