@import "calypso/assets/stylesheets/shared/mixins/breakpoints";
@import "@automattic/typography/styles/variables";

.section-nav-tab .count {
	margin-left: 8px;
}

.section-nav-tab {
	@mixin tabs-view-styles {
		width: auto;
		flex: none;
		border-bottom: 2px solid transparent;
		border-top: none;
		text-align: center;

		&.is-selected {
			border-bottom-color: var(--color-neutral-70);
		}

		&:hover:not(.is-selected) {
			border-bottom-color: #d5dffa;
		}
	}

	.enforce-tabs-view & {
		@include tabs-view-styles;
	}

	@include breakpoint-deprecated( ">480px" ) {
		@include tabs-view-styles;
	}
}

.section-nav-tab__link,
.section-nav-tab__text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.section-nav-tab__link {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 15px;
	width: 100%;
	font-size: $font-body-small;
	font-weight: 600;
	line-height: 18px;
	color: var(--color-neutral-100);
	cursor: pointer;

	&:visited {
		color: var(--color-neutral-100);
	}

	&[disabled],
	.notouch &[disabled]:hover {
		color: var(--color-neutral-20);
		cursor: default;
	}

	.is-selected & {
		color: var(--color-text-inverted);
		background-color: var(--color-primary);

		@include breakpoint-deprecated( "<480px" ) {
			.count {
				color: var(--color-text-inverted);
				border-color: var(--color-border-inverted);
			}
		}
	}

	&:focus {
		outline: none;

		.accessible-focus & {
			box-shadow: inset 0 0 0 2px var(--color-primary-light);
		}
	}

	.is-external & {
		.gridicons-external {
			vertical-align: text-bottom;
			margin-left: 3px;
		}
	}

	.notouch & {
		&:hover {
			color: var(--color-neutral-100);
		}
	}

	.notouch .minimal & {
		&:hover {
			background-color: transparent;
		}
	}

	.notouch .is-selected & {
		&:hover {
			color: var(--color-neutral-100);
		}
	}

	@mixin tabs-view-styles {
		display: block;
		width: auto;
		padding: 16px 16px 14px;
		color: var(--color-neutral-100);
		font-weight: 400;

		&:visited {
			color: var(--color-neutral-100);
		}
	}

	@mixin tabs-view-selected-styles {
		color: var(--color-neutral-100);
		background-color: transparent;

		&::after {
			display: none;
		}

		.notouch & {
			&:hover {
				color: var(--color-neutral-100);
			}
		}
	}

	@mixin tabs-view-minimal-styles {
		color: var(--color-neutral-100);
	}

	.enforce-tabs-view & {
		@include tabs-view-styles;
	}

	.enforce-tabs-view .is-selected & {
		@include tabs-view-selected-styles;
	}

	.enforce-tabs-view.minimal & {
		@include tabs-view-minimal-styles;
	}

	@include breakpoint-deprecated( ">480px" ) {
		@include tabs-view-styles;

		.is-selected & {
			@include tabs-view-selected-styles;
		}

		.minimal & {
			@include tabs-view-minimal-styles;
		}
	}
}

.section-nav-tab__text {
	display: block;
	flex: 1 0 auto;
	width: 0;

	@mixin tabs-view-styles {
		display: inline;
		flex: none;
		width: auto;
	}

	.enforce-tabs-view & {
		@include tabs-view-styles;
	}

	@include breakpoint-deprecated( ">480px" ) {
		@include tabs-view-styles;
	}
}
.section-nav-updated.section-nav {
	.is-selected.section-nav-tab .section-nav-tab__link .count {
		color: var(--color-text);
	}

	@include breakpoint-deprecated( ">660px" ) {
		.section-nav-tab__link {
			color: var(--studio-gray-70);
			&:hover {
				background-color: transparent;
				color: var(--studio-gray-80);
			}
			&:visited {
				color: var(--studio-gray-80);
			}
		}
		.section-nav-tab:hover:not(.is-selected) {
			border-bottom-color: transparent;
		}
		.is-selected {
			.section-nav-tab__link {
				color: var(--studio-gray-70);
			}
		}
	}

	.section-nav__mobile-header {
		.count {
			margin-inline-start: 8px;
		}
		.gridicon {
			margin-inline-start: auto;
		}
	}

	.count {
		background: var(--studio-gray-5);
		border-radius: 3px;
		border: none;
		font-weight: normal;
	}
	margin-bottom: 0;
	@include breakpoint-deprecated( ">660px" ) {
		box-shadow: none;
	}
}

.plugins-section-nav {
	@include breakpoint-deprecated( ">660px" ) {
		.section-nav-tabs.is-dropdown {
			margin: 8px 0;
			z-index: 99;
			.select-dropdown__header .count {
				top: unset;
				margin-inline-end: 20px;
			}
			.select-dropdown__item-count .count {
				position: static;
				color: var(--color-primary);
			}
		}
	}
}
