/*
 * Labels: eyebrow, small label, tag, rule label, range label.
 *
 * Two uppercase sizes (D8): the eyebrow at 14 / 0.14em above a heading, the
 * label at 13 / 0.12em on captions, table heads and footer columns. The tag
 * is a 13 / 0.10em box. All 600.
 */

@layer vdt.components {
	.vdt-eyebrow {
		display: block;
		font-size: var(--vdt-size-eyebrow);
		font-weight: var(--vdt-weight-semibold);
		letter-spacing: var(--vdt-tracking-eyebrow);
		line-height: 1.3;
		text-transform: uppercase;
		color: var(--vdt-text-brand);
	}

	.vdt-label {
		display: block;
		font-size: var(--vdt-size-label);
		font-weight: var(--vdt-weight-semibold);
		letter-spacing: var(--vdt-tracking-label);
		line-height: 1.3;
		text-transform: uppercase;
		color: var(--vdt-text-muted);
	}

	/* On the dark themes the eyebrow drops to white .62 (the audited value). */
	.section-theme-purple .vdt-eyebrow,
	.section-theme-dark .vdt-eyebrow,
	.vdt-on-dark .vdt-eyebrow {
		color: var(--vdt-on-dark-faint);
	}

	/* "Third-party": a bordered box, 26 tall, 2px radius. */
	.vdt-tag {
		display: inline-flex;
		align-items: center;
		height: 1.625rem;
		padding: 0 var(--vdt-space-8);
		border: var(--vdt-rule-width) solid var(--vdt-border-tag);
		border-radius: var(--vdt-radius-sm);
		font-size: var(--vdt-size-tag);
		font-weight: var(--vdt-weight-semibold);
		letter-spacing: var(--vdt-tracking-tag);
		line-height: 1;
		text-transform: uppercase;
		color: var(--vdt-text-muted);
		white-space: nowrap;
	}

	/* "LF · HF · UHF" on a topic card: 13 / 500 / 0.04em, not uppercase. */
	.vdt-range {
		font-size: var(--vdt-size-13);
		font-weight: var(--vdt-weight-medium);
		letter-spacing: var(--vdt-tracking-range);
		color: var(--vdt-text-muted);
	}

	/*
	 * Rule label: an ink rule with an eyebrow under it and an optional note on
	 * the right. Opens the video strip on Knowledge and the product band on
	 * Products.
	 */
	.vdt-rule-label {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--vdt-space-24);
		padding-top: var(--vdt-space-16);
		border-top: var(--vdt-rule-width) solid var(--vdt-rule);
	}

	.vdt-rule-label .vdt-eyebrow {
		color: var(--vdt-text-heading);
	}

	.vdt-rule-label__note {
		font-size: var(--vdt-size-meta);
		font-weight: var(--vdt-weight-medium);
		color: var(--vdt-text-muted);
	}
}