/**
 * Tabbed Navigation
 */

@use "../../../colors/colors.module" as colors;
@use "~@wordpress/base-styles/colors" as wp-colors;
@use "~@wordpress/base-styles/variables" as wp-vars;

// The Tabs.Root wrapper spans the tab bar and the tab panels so the panels can
// contain the routed content; it plays no layout role of its own.
.newspack-tabbed-navigation__root {
	display: contents;
}

.newspack-tabbed-navigation {
	background: wp-colors.$white;
	border-bottom: var( --wpds-border-width-xs, #{wp-vars.$border-width} ) solid var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
	width: 100%;

	/* stylelint-disable-next-line plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the indicator token. */
	--wpds-color-stroke-interactive-neutral-strong: #{colors.$primary-600};

	a[role="tab"] {
		text-decoration: none;

		// wp-admin's unlayered `a { color }` beats every rule inside the design
		// system's @layer wp-ui, so anchor tabs need their colors restated here:
		// gray-900 for enabled tabs, and the DS disabled token for disabled ones.
		&:not([data-disabled]):not([aria-disabled="true"]) {
			color: wp-colors.$gray-900;

			&:hover,
			&:active,
			&[aria-selected="true"] {
				color: wp-colors.$gray-900;
			}
		}

		// wp-admin's common.css and the wizard shell both decorate a:focus with a
		// box-shadow ring, a 2px border-radius, and a transparent outline. Reset
		// all three so the component's own :focus-visible ring (an inset outline
		// on its ::after, shipped by @wordpress/ui) is the only focus treatment.
		&:focus {
			border-radius: 0;
			box-shadow: none;
			outline: none;
		}

		// Square the component's focus ring corners.
		&::after {
			border-radius: 0;
		}

		&[data-disabled],
		&[aria-disabled="true"] {
			color: var( --wpds-color-foreground-interactive-neutral-disabled, #{wp-colors.$gray-600} );
			pointer-events: none;
		}
	}

	// Link-driven variant: plain navigation styled to match the tabs widget.
	&--links {
		align-items: stretch;
		display: flex;
		overflow-x: auto;
	}

	.newspack-tabbed-navigation__link {
		align-items: center;
		color: wp-colors.$gray-900;
		display: flex;
		font-size: var( --wpds-typography-font-size-md, #{wp-vars.$default-font-size} );
		height: wp-vars.$grid-unit-60; // Matches @wordpress/ui's horizontal tab height.
		line-height: 1.2;
		padding-inline: var( --wpds-dimension-padding-lg, #{wp-vars.$grid-unit-20} );
		text-decoration: none;
		white-space: nowrap;

		&:hover,
		&:active,
		&:focus {
			color: wp-colors.$gray-900;
		}

		// Mirror the tabs widget's focus ring (an inset outline) with plain
		// outline + offset, replacing wp-admin's box-shadow focus decoration.
		&:focus {
			border-radius: 0;
			box-shadow: none;
			outline: none;
		}

		&:focus-visible {
			outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color ) );
			outline-offset: calc( var( --wpds-dimension-padding-md, #{wp-vars.$grid-unit-15} ) * -1 );
		}

		&[aria-current="page"] {
			box-shadow: inset 0 calc( var( --wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) * -1 ) 0 var( --wpds-color-stroke-interactive-neutral-strong, #{colors.$primary-600} );
		}
	}
}