core/panel/styles/Utilities.module.css

/* Utility classes for consistent styling */

.flex {
	display: flex;
}

.flexCol {
	flex-direction: column;
}

.itemsCenter {
	align-items: center;
}

.justifyCenter {
	justify-content: center;
}

.justifyBetween {
	justify-content: space-between;
}

.gap1 {
	gap: 4px;
}
.gap2 {
	gap: 8px;
}
.gap3 {
	gap: 12px;
}
.gap4 {
	gap: 16px;
}
.gap5 {
	gap: 20px;
}

.m0 {
	margin: 0;
}
.mt1 {
	margin-top: 4px;
}
.mt2 {
	margin-top: 8px;
}
.mt3 {
	margin-top: 12px;
}
.mt4 {
	margin-top: 16px;
}
.mt5 {
	margin-top: 20px;
}

.mb1 {
	margin-bottom: 4px;
}
.mb2 {
	margin-bottom: 8px;
}
.mb3 {
	margin-bottom: 12px;
}
.mb4 {
	margin-bottom: 16px;
}
.mb5 {
	margin-bottom: 20px;
}

.p0 {
	padding: 0;
}
.p1 {
	padding: 4px;
}
.p2 {
	padding: 8px;
}
.p3 {
	padding: 12px;
}
.p4 {
	padding: 16px;
}
.p5 {
	padding: 20px;
}

.textXs {
	font-size: 12px;
}
.textSm {
	font-size: 14px;
}
.textBase {
	font-size: 16px;
}
.textLg {
	font-size: 18px;
}
.textXl {
	font-size: 20px;
}
.text2Xl {
	font-size: 24px;
}

.fontNormal {
	font-weight: 400;
}
.fontMedium {
	font-weight: 500;
}
.fontSemibold {
	font-weight: 600;
}
.fontBold {
	font-weight: 700;
}

.textPrimary {
	color: var(--primary-color);
}
.textSecondary {
	color: var(--text-secondary);
}
.textMuted {
	color: var(--text-muted);
}
.textSuccess {
	color: var(--success-color);
}
.textDanger {
	color: var(--danger-color);
}
.textWarning {
	color: var(--warning-color);
}

.bgWhite {
	background-color: var(--bg-color);
}
.bgCard {
	background-color: var(--card-bg);
}
.bgSuccessLight {
	background-color: var(--success-light);
}
.bgDangerLight {
	background-color: var(--danger-light);
}
.bgWarningLight {
	background-color: var(--warning-light);
}