.components-panel__header.edit-post-sidebar__panel-tabs {
	justify-content: flex-start;
	padding-left: 0;
	padding-right: $grid-size-small;
	border-top: 0;
	position: sticky;
	z-index: z-index(".components-panel__header.edit-post-sidebar__panel-tabs");
	top: 0;

	ul {
		display: flex;
	}
	li {
		margin: 0;
	}
}

.edit-post-sidebar__panel-tab {
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
	margin-left: 0;
	font-weight: 400;
	color: $dark-gray-900;
	@include square-style__neutral;
	transition: box-shadow 0.1s linear;

	// 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;
		font-weight: 600;
		height: 0;
		overflow: hidden;
		speak: none;
		visibility: hidden;
	}

	&.is-active {
		box-shadow: inset 0 -3px theme(outlines);
		font-weight: 600;
		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: 3px solid transparent;
		}
	}

	&:focus {
		@include square-style__focus;
	}
}