@use "@wordpress/base-styles/variables" as *;

.components-tab-panel__tabs {
	display: flex;
	align-items: stretch;
	flex-direction: row;

	&[aria-orientation="vertical"] {
		flex-direction: column;
	}
}

.components-tab-panel__tabs-item {
	position: relative;
	border-radius: 0;
	height: $grid-unit-60 !important; // https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: var(--wpds-cursor-control);
	padding: 3px var(--wpds-dimension-padding-lg); // Use padding to offset the is-active border, this benefits Windows High Contrast mode
	margin-left: 0;
	font-weight: var(--wpds-typography-font-weight-regular);
	color: var(--wpds-color-foreground-interactive-neutral);

	&:disabled,
	&[aria-disabled="true"] {
		color: var(--wpds-color-foreground-interactive-neutral-disabled);
	}

	&:not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
		color: var(--wpds-color-foreground-interactive-neutral-active);
	}

	&:focus:not(:disabled) {
		position: relative;
		box-shadow: none;
		outline: none;
	}

	// Tab indicator
	&::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;

		// Draw the indicator.
		background: var(--wpds-color-stroke-interactive-neutral-strong);
		height: calc(0 * var(--wpds-border-width-focus));
		border-radius: 0;

		// Animation
		@media not (prefers-reduced-motion) {
			transition: height 0.1s linear;
		}
	}

	// Active.
	&.is-active::after {
		height: calc(1 * var(--wpds-border-width-focus));

		// Windows high contrast mode.
		outline: 2px solid transparent;
		outline-offset: -1px;
	}

	// Focus.
	&::before {
		content: "";
		position: absolute;
		inset: var(--wpds-dimension-padding-md);
		pointer-events: none;

		// Draw the indicator.
		box-shadow: 0 0 0 0 transparent;
		border-radius: var(--wpds-border-radius-sm);

		// Animation
		@media not (prefers-reduced-motion) {
			transition: box-shadow 0.1s linear;
		}
	}

	&:focus-visible::before {
		box-shadow:
			0 0 0 var(--wpds-border-width-focus)
			var(--wpds-color-stroke-focus);

		// Windows high contrast mode.
		outline: 2px solid transparent;
	}

	.components-tab-panel__tabs[aria-orientation="vertical"] & {
		border-radius: var(--wpds-border-radius-sm);

		&::after {
			display: none;
		}

		&.is-active {
			background: var(--wpds-color-background-interactive-neutral-weak-active);
		}
	}
}

.components-tab-panel__tab-content {
	&:focus {
		box-shadow: none;
		outline: none;
	}

	&:focus-visible {
		box-shadow:
			0 0 0 var(--wpds-border-width-focus)
			var(--wpds-color-stroke-focus);

		// Windows high contrast mode.
		outline: 2px solid transparent;
		outline-offset: 0;
	}
}