@import '../../../../styles/_partials/index';
@import '../../../../common/styles/themeUtils';

.TextBase {
	// setup a light and dark css variable for each css prop name so we can effortlessly toggle between them based on the current theme
	@include setupThemeVars(
		'--TextBase_TextColor'
	);
	@include defaultFontSettings();

	// css variable-based styles
	color: var(--TextBase_TextColor);
}

.TextBase__Color_Gray_Gray25 {
	@include setThemeVar('--TextBase_TextColor', $gray, $gray25);
}

.TextBase__Color_Gray_Gray15 {
	@include setThemeVar('--TextBase_TextColor', $gray, $gray15);
}

.TextBase__Color_GrayDark_Gray15 {
	@include setThemeVar('--TextBase_TextColor', $gray-dark, $gray15);
}

.TextBase__Color_Gray25 {
	@include setThemeVar('--TextBase_TextColor', $gray25);
}

.TextBase__Color_GrayDark_White {
	@include setThemeVar('--TextBase_TextColor', $gray-dark, $white);
}

.TextBase__FontSize_Small {
	font-size: $font-size-header-xs;
}

.TextBase__FontSize_Medium {
	font-size: $font-size-header-s;
}

.TextBase__FontSize_Large {
	font-size: $font-size-header-m;
}

.TextBase__FontSize_XLarge {
	font-size: $font-size-header-xl;
}

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

.TextBase__FontWeight_500 {
	font-weight: $font-weight-500-medium;
}

.TextBase__FontWeight_700 {
	font-weight: $font-weight-700-bold;
}