.text {
	color: var(--l2-foreground);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.07px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dot {
	height: 5px;
	width: 5px;
	border-radius: 50%;
	background-color: var(--l3-background);
	flex-shrink: 0;
}

.option {
	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left-section {
			display: flex;
			align-items: center;
			flex: 1;
			min-width: 0;
			gap: 8px;

			.value {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.right-section {
			display: flex;
			align-items: center;
			gap: 4px;
			flex-shrink: 0;

			.data-type {
				display: flex;
				height: 20px;
				padding: 4px 8px;
				justify-content: center;
				align-items: center;
				gap: 4px;
				border-radius: 20px;
				background: color-mix(in srgb, var(--l1-foreground) 8%, transparent);
				white-space: nowrap;
			}

			.type-tag {
				display: flex;
				align-items: center;
				height: 20px;
				padding: 0px 6px;
				justify-content: center;
				gap: 4px;
				border-radius: 50px;
				text-transform: capitalize;
				white-space: nowrap;

				&.tag {
					border-radius: 50px;
					background: color-mix(
						in srgb,
						var(--bg-sienna-400) 10%,
						transparent
					) !important;
					color: var(--bg-sienna-400) !important;

					.dot {
						background-color: var(--bg-sienna-400);
					}
					.text {
						color: var(--bg-sienna-400);
						font-family: Inter;
						font-size: 12px;
						font-style: normal;
						font-weight: 400;
						line-height: 18px; /* 150% */
						letter-spacing: -0.06px;
					}
				}

				&.resource {
					border-radius: 50px;
					background: #4bcff910 !important;
					color: var(--bg-aqua-400) !important;

					.dot {
						background-color: var(--bg-aqua-400);
					}
					.text {
						color: var(--bg-aqua-400);
						font-family: Inter;
						font-size: 12px;
						font-style: normal;
						font-weight: 400;
						line-height: 18px; /* 150% */
						letter-spacing: -0.06px;
					}
				}

				&.scope {
					border-radius: 50px;
					background: color-mix(
						in srgb,
						var(--bg-robin-400) 10%,
						transparent
					) !important;
					color: var(--bg-robin-400) !important;

					.dot {
						background-color: var(--bg-robin-400);
					}
					.text {
						color: var(--bg-robin-400);
						font-family: Inter;
						font-size: 12px;
						font-style: normal;
						font-weight: 400;
						line-height: 18px; /* 150% */
						letter-spacing: -0.06px;
					}
				}
			}
		}
		.option-meta-data-container {
			display: flex;
			gap: 8px;
		}
	}

	.container-without-tag {
		display: flex;
		align-items: center;
		gap: 8px;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
			gap: 8px;

			.OPERATOR {
				color: var(--l2-foreground);
				font-family: 'Space Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
				text-transform: uppercase;
				width: 100%;
			}

			.VALUE {
				color: var(--l2-foreground);
				font-family: 'Space Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
				text-transform: uppercase;
				width: 100%;
			}
		}

		.right {
			display: flex;
			align-items: center;
			gap: 4px;
			.data-type {
				display: flex;
				height: 20px;
				padding: 4px 8px;
				justify-content: center;
				align-items: center;
				gap: 4px;
				border-radius: 20px;
				background: var(--l3-background);
			}
		}
	}
}
.option:hover {
	.container {
		.left-section {
			.value {
				color: var(--l1-foreground);
			}
		}
	}
	.container-without-tag {
		.value {
			color: var(--l1-foreground);
		}
	}
}
