.palette {
	display: flex;
	flex-direction: row;
	gap: $space-sm;

	.color {
		.color-box {
			width: 100px;
			height: 80px;
		}
	}
}

/* BACKGROUND COLORS */

.bg-primary {
	background: $color-primary;
}

.bg-secondary {
	background: $color-secondary;
}

.bg-success {
	background: $color-success;
}

.bg-accent {
	background: $color-accent;
}

.bg-info {
	background: $color-info;
}

.bg-warning {
	background: $color-warning;
}

.bg-error {
	background: $color-error;
}

/* TEXT COLORS */

.text-color-primary {
	color: $color-primary;
}

.text-color-secondary {
	color: $color-secondary;
}

.text-color-success {
	color: $color-success;
}

.text-color-accent {
	color: $color-accent;
}

.text-color-info {
	color: $color-info;
}

.text-color-warning {
	color: $color-warning;
}

.text-color-error {
	color: $color-error;
}