.key-value-label {
	display: flex;
	align-items: center;
	border: 1px solid var(--bg-slate-400);
	border-radius: 2px;
	flex-wrap: wrap;

	&__key,
	&__value {
		padding: 1px 6px;
		font-size: 14px;
		font-weight: 400;
		line-height: 18px;
		letter-spacing: -0.005em;
		&,
		&:hover {
			color: var(--text-vanilla-400);
		}
	}
	&__key {
		background: var(--bg-ink-400);
		border-radius: 2px 0 0 2px;
	}
	&__value {
		background: var(--bg-slate-400);
	}
}

.lightMode {
	.key-value-label {
		border-color: var(--bg-vanilla-400);
		&__key,
		&__value {
			color: var(--text-ink-400);
		}
		&__key {
			background: var(--bg-vanilla-300);
		}
		&__value {
			background: var(--bg-vanilla-200);
		}
	}
}
