@use '@angular/material' as mat;
@use "sass:map";

@mixin prop($lacuna-theme) {
	.prop-label {
		font-size: 13px;
		font-weight: 600;
		text-transform: uppercase;
		margin-bottom: 2px;
		padding-top: 3px;
		font-weight: 600;
		color: #8E8E8E;
	}

	.prop-value {
		font-size: 16px;
		margin-bottom: 25px;
	}

	.pre-prop {
		.prop-value {
			white-space: pre-wrap !important;
		}
	}
}

@mixin text-styles($lacuna-theme) {
	.font-medium {
		font-weight: 500;
	}

	.font-light {
		font-weight: 300;
	}

	.text-xs {
		font-size: 12px !important;
	}

	.link {
		color: mat.m2-get-color-from-palette(map.get($lacuna-theme, accent), 500);

		&:hover {
			color: mat.m2-get-color-from-palette(map.get($lacuna-theme, accent), 900);
		}
	}

	// On Bootstrap v4, links had no text-decoration by default. However, on Bootstrap v5, they do. We are
	// removing the default text decoration to smooth out the transition from v4 to v5 to client apps
	a {
		text-decoration: none;
	}
}