.components-tab-panel__tabs {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	&[aria-orientation="vertical"] {
		flex-direction: column;
	}
}

.components-tab-panel__tabs-item {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	cursor: pointer;
	height: $grid-unit-60;
	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
	margin-left: 0;
	font-weight: 500;
	transition: box-shadow 0.1s linear;
	box-sizing: border-box;

	// This pseudo-element "duplicates" the tab label and sets the text to bold.
	// This ensures that the tab doesn't change width when selected.
	// See: https://github.com/GeChiUI/gutenberg/pull/9793
	&::after {
		content: attr(data-label);
		display: block;
		height: 0;
		overflow: hidden;
		speak: none;
		visibility: hidden;
	}

	&:focus:not(:disabled) {
		box-shadow: inset 0 var(--gc-admin-border-width-focus) var(--gc-admin-theme-color);
	}


	&.is-active {
		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
		box-shadow: inset 0 0 0 var(--gc-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--gc-admin-theme-color);
		position: relative;

		// This border appears in Windows High Contrast mode instead of the box-shadow.
		&::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 1px;
			right: 0;
			left: 0;
			border-bottom: $border-width-tab solid transparent;
		}
	}

	&:focus {
		box-shadow: inset 0 0 0 var(--gc-admin-border-width-focus) var(--gc-admin-theme-color);
	}

	&.is-active:focus {
		box-shadow: inset 0 0 0 var(--gc-admin-border-width-focus) var(--gc-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--gc-admin-theme-color);
	}
}