@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;
@use "../utils/theme-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 $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
	margin-left: 0;
	font-weight: $font-weight-regular;

	&: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: $components-color-accent;
		height: calc(0 * var(--wp-admin-border-width-focus));
		border-radius: 0;

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

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

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

	// Focus.
	&::before {
		content: "";
		position: absolute;
		top: $grid-unit-15;
		right: $grid-unit-15;
		bottom: $grid-unit-15;
		left: $grid-unit-15;
		pointer-events: none;

		// Draw the indicator.
		box-shadow: 0 0 0 0 transparent;
		border-radius: $radius-small;

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

	&:focus-visible::before {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;

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

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

	&:focus-visible {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;

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