/* -----------------------------------------------------------------------------
   Member Profile Nav
   ----------------------------------------------------------------------------- */

#subnav.bond-member-subnav {
	margin: 40px 0 0;
	padding: 0 0 0.556px;
	border-bottom: 0.556px solid var(--bond-member-line);

	& .bond-member-subnav__list {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	& .bond-member-subnav__item {
		margin: 0;

		&.current .bond-member-subnav__link {
			background: var(--bond-member-tab-red);
			color: #fff;

			&::after {
				content: "";
				position: absolute;
				right: 0;
				bottom: 0.01px;
				left: 0;
				height: 2.99px;
				background: var(--bond-member-tab-red);
			}
		}
	}

	& .bond-member-subnav__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		min-height: 47.5px;
		padding: 0 14.25px;
		color: var(--bond-member-muted);
		font-size: 17px;
		font-weight: 400;
		line-height: 26px;
		text-decoration: none;
		white-space: nowrap;

		&.is-active {
			background: var(--bond-member-tab-red);
			color: #fff;

			&::after {
				content: "";
				position: absolute;
				right: 0;
				bottom: 0.01px;
				left: 0;
				height: 2.99px;
				background: var(--bond-member-tab-red);
			}
		}

		&:hover,
		&:focus {
			color: var(--bond-member-muted);
			text-decoration: none;
		}
	}

	& .bond-member-subnav__item.current .bond-member-subnav__link:hover,
	& .bond-member-subnav__item.current .bond-member-subnav__link:focus {
		color: #fff;
	}
}

@media (max-width: 782px) {
	#subnav.bond-member-subnav .bond-member-subnav__list {
		overflow-x: auto;
	}
}