.hulk-settings-wrap {

	.hulk-settings-nav {
		display: flex;
		flex-wrap: wrap;
		position: sticky;
		top: 32px;
		z-index: 100;
		margin: 0 -20px;
		padding: 0 20px 0 12px;
		background: #fff;
		border-bottom: 1px solid #e2e4e7;
		justify-content: space-between;
		align-items: center;
	}

	.hulk-nav-list {
		padding: 0;
		list-style: none none outside;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0 auto 0 0;
	}

	.hulk-nav-item {
		display: inline-flex;
		margin: 0;
		padding: 0;
		position: relative;
		user-select: none;

		.components-button {
			font-weight: 600;
			font-size: 13px;
		}
	}

	.hulk-nav-link {
		display: block;
		margin: 0;
		position: relative;
		user-select: none;
		text-decoration: none;
		cursor: pointer;
		font-weight: 600;
		color: var(--hulk-settings-text-color);
		padding: 15px 12px 18px;
		transition: 20ms ease color;
		box-shadow: none !important;
		font-size: 13px;

		&:after {
			content: "";
			height: 0;
			transition: height .15s ease-in-out;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			backface-visibility: hidden;
			transform: translateZ(0);
			width: calc(100% - 8px);
			margin: 0 auto;
		}

		&:hover {
			color: var(--hulk-settings-primary-color);
		}
	}

	.hulk-link-active {
		color: var(--hulk-settings-primary-color);

		&:after {
			height: 3px;
			background: var(--hulk-settings-primary-color);
			border-radius: 4px 4px 0 0;
		}
	}
}