// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s, `<ul>`s or `<ol>`s.

.ur-free-vs-pro--link,
.ur-help--link {
	color: $nav-link-color !important;
	font-weight: 500;

	&:hover {
		color: $nav-link-hover-color !important;
	}

	&:focus {
		outline: none;
		box-shadow: none;
	}
}

.ur-upgrade--link,
.ur-free-vs-pro--link {
	display: flex;
	align-items: center;
	gap: $spacing_8px;
	cursor: pointer;
	text-decoration: none;
	font-size: 14px;
	line-height: 18px;
	color: #FF8C39;
	font-weight: $medium;

	&:hover {
		color: #FF8C39;
		text-decoration: underline;
		text-decoration-style: solid;
		text-underline-offset: 5px;
		text-decoration-color: #FF8C39;
		text-decoration-thickness: 1px;
		background: transparent !important;
	}

	&:focus {
		outline: none;
		box-shadow: none;
	}
}

.ur-upgrade--link {
	&::after {
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff8c39' viewBox='0 0 24 24'%3E%3Cpath d='M2 19V5a3 3 0 0 1 3-3h6a1 1 0 1 1 0 2H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6a1 1 0 1 1 2 0v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3Z'/%3E%3Cpath d='M20.293 2.293a1 1 0 1 1 1.414 1.414l-9 9a1 1 0 1 1-1.414-1.414l9-9Z'/%3E%3Cpath d='M20 9V4h-5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0Z'/%3E%3C/svg%3E");
		width: 16px;
		height: 16px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		display: block;
	}
}

.ur-free-vs-pro--link {
	&::after {
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%232d3559' d='M1.333 12.667V3.333a2 2 0 0 1 2-2h4a.667.667 0 0 1 0 1.334h-4a.666.666 0 0 0-.666.666v9.334a.666.666 0 0 0 .666.666h9.334a.666.666 0 0 0 .666-.666v-4a.667.667 0 0 1 1.334 0v4a2 2 0 0 1-2 2H3.333a2 2 0 0 1-2-2'/%3E%3Cpath fill='%232d3559' d='M13.528 1.528a.667.667 0 0 1 .944.944l-6 6a.667.667 0 0 1-.944-.944z'/%3E%3Cpath fill='%232d3559' d='M13.333 6V2.667H10a.667.667 0 0 1 0-1.334h4c.368 0 .667.299.667.667v4a.667.667 0 0 1-1.334 0'/%3E%3C/svg%3E");
		width: 16px;
		height: 16px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		display: block;
	}

	&:hover {
		text-decoration: underline;
		text-decoration-style: solid;
		text-underline-offset: 5px;
		text-decoration-color: #475bb2;
		text-decoration-thickness: 1px;
		background: transparent !important;

		&::after {
			// filter: brightness(0) saturate(100%) invert(34%) sepia(69%) saturate(519%) hue-rotate(190deg) brightness(93%) contrast(95%);
			filter: brightness(0) saturate(100%) invert(35%) sepia(65%) saturate(774%) hue-rotate(195deg) brightness(85%) contrast(87%);
		}
	}

	&:focus {
		outline: none;
		box-shadow: none;
	}
}

.ur-nav {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;

	&--tab {
		display: flex;
		border-bottom: $border-width solid $border-color;

		.user-registration-membership_page_user-registration-settings & {
			padding: 0;
			margin: 0 16px;
			border-bottom: 0;
		}
	}

	&__link {
		display: block;
		font-weight: 500;
		color: $nav-link-color;
		padding: 8px 12px;
		text-decoration: none;
		border: $border_width solid transparent;

		&:hover,
		&:focus {
			color: $nav-link-hover-color;
		}

		&.is-active {
			background-color: $primary-color;
			border-color: $border-color $border-color $white;
			border-radius: 4px 4px 0 0;
		}

		// Customize setting page nav.
		.user-registration-membership_page_user-registration-settings & {
			background-color: transparent;
			color: $white;
			margin: 0;

			&.is-active {
				background-color: $white;
				color: $gray-base;
				border-color: $white;
			}
		}
	}
}