.rfw-app-tab-nav__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	box-shadow: inset 0 -1px 0 wpColors.$gray-400;
	margin-bottom: var(--main-gap);

	&-item {
		background: transparent;
		border: none;
		box-shadow: inset 0 -1px 0 wpColors.$gray-400;
		border-radius: 0;
		cursor: pointer;
		height: wpVariables.$grid-unit-60;
		padding: calc(wpVariables.$grid-unit-15 / 4) wpVariables.$grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
		margin-left: 0;
		font-weight: 500;
		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 var(--wp-admin-border-width-focus) 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 var(--wp-admin-border-width-focus) transparent, inset 0 0 - $border-width-tab 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;
				inset: 0 0 1px;
				border-bottom: $border-width-tab solid transparent;
			}
		}

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

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