signoz/frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss

.attributes-corner {
	display: flex;
	flex-direction: column;

	.no-data {
		height: 400px;
		justify-content: center;
		align-items: center;
	}

	.search-input {
		margin: 12px;
		width: auto;
	}

	.attributes-container {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 12px;

		.item {
			display: flex;
			flex-direction: column;
			gap: 8px;
			justify-content: flex-start;

			.item-key {
				color: var(--bg-vanilla-100);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
			}

			.value-wrapper {
				display: flex;
				padding: 2px 8px;
				align-items: center;
				width: fit-content;
				max-width: 100%;
				gap: 8px;
				border-radius: 50px;
				border: 1px solid var(--bg-slate-400);
				background: var(--bg-slate-500);
				.item-value {
					color: var(--bg-vanilla-400);
					font-family: Inter;
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: 20px; /* 142.857% */
					letter-spacing: 0.56px;
				}
			}
		}
	}

	.border-top {
		border-top: 1px solid var(--bg-slate-400);
	}
}

.lightMode {
	.attributes-corner {
		.attributes-container {
			.item {
				.item-key {
					color: var(--bg-ink-100);
				}

				.value-wrapper {
					border: 1px solid var(--bg-vanilla-300);
					background: var(--bg-vanilla-300);

					.item-value {
						color: var(--bg-ink-400);
					}
				}
			}
		}

		.border-top {
			border-top: 1px solid var(--bg-vanilla-300);
		}
	}
}