// =============================================================================
// :: Circles
// =============================================================================
/**
 * Scope defined specifically for creating the visual representation of the
 * circles component.
 */

// =============================================================================
// :: root
// =============================================================================
.s-bp-circles {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 110rem;
	height: 110rem;

	background-color: $background-color-pink;
}

.s-bp-circles--colors {
	display: flex;

	width: 110rem;
	height: 100rem;

	background-color: $white;
}