.app-tab-nav__tabs {
	display: flex;
	align-items: stretch;
	box-shadow: inset 0 -1px 0 #ccc;
	margin-bottom: var(--main-gap);

	&-item {
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 0;
		cursor: pointer;
		height: 48px;
		padding: 3px 16px; // 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/WordPress/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 2px var(--wp-admin-theme-color);
		}

		&.is-active {
			// The transparent shadow ensures no jumpiness
			// when focus animates on an active tab.
			box-shadow: inset 0 0 0 2px transparent, inset 0 -4px 0 0 var(--wp-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: 4px solid transparent;
			}
		}

		&:focus {
			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
		}

		&.is-active:focus {
			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color), inset 0 0 -4px 0 0 var(--wp-admin-theme-color);
		}
	}
}